Контент перекрывается в приложении Ionic 1 для IOS версии 11 и выше

Question

У меня есть приложение, созданное с использованием Cordova, Ionic V1 и AngularJS V1 и с определенным элементом управления, отображающим дату , содержимое перекрывается с предыдущим значением.Эта проблема наблюдается только в IOS 11.4.1 (последняя версия).В предыдущей версии IOS элемент управления работал правильно.

Я прикрепил снимок экрана

После проверки в XCode я обнаружил, что это проблема, вызванная display: block свойство.Поэтому я попытался изменить значение display, большинство значений говорит о том, что в IOS не поддерживается, и работает display: -webkit-box- .Но когда я добавляю, что все содержимое перемещается в крайнюю левую сторону, то есть значения месяца, даты и года, которые я выделил на изображении.

И ниже код

this.selectDate = function (date) {
        if (this.isDisabled(date)) return;
        this.selectedDate = angular.copy(date);
        this.selectedDate.setHours(0, 0, 0, 0);
        this.tempDate = angular.copy(this.selectedDate);
    };

Шаблонкод

<div class=row>
  <div class="col datepicker-day-of-month" 
       ng-click="datepickerCtrl.changeType(\'date\')"> 
       {{datepickerCtrl.selectedDate | date: \'d\'}}
  </div>
</div>

Приведенный выше код является частью ionic-datepicker link .

Содержимое даты правильно работает на Android имеет только в IOS V 11.4.1.

Спасибо:)

Answer 1

Проблема связана со значением свойства display, которое не поддерживает IOS 11.4.1.

display: block;

Указанное выше свойство не работает в последней версии IOS.

Итак, я изменил значение свойства display

display: -webkit-inline-box !important;
text-align: -webkit-center !important;

text-align используется для выравнивания элементов div в центре.

Это решение работает как для Android, так и для IOS.

Надеюсь, это поможет другим.

Answer 2

Я не проверял, но столкнулся с чем-то похожим. Пожалуйста, попробуйте заменить <div> на <span> и посмотрите, работает ли он:

<div class=row>
  <span class="col datepicker-day-of-month" 
       ng-click="datepickerCtrl.changeType(\'date\')"> 
       {{datepickerCtrl.selectedDate | date: \'d\'}}
  </span>
</div>

Также вместо display: block используйте display: inline.

Надеюсь, это поможет вам.