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

Shashank HS спросил: 31 июля 2018 в 09:42 в: ios

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

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

После проверки в XCode я обнаружил, что это проблема, вызванная свойством display: block. Поэтому я попытался изменить значение отображения, большинство значений говорит о неподдерживаемом в 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.

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

Спасибо:)


2 ответа

Есть решение
Shashank HS ответил: 04 августа 2018 в 10:28

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

display: block;

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

Поэтому я изменил значение свойства display

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

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

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

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

VicJordan ответил: 03 августа 2018 в 03:32

Я не проверял это, но столкнулся с чем-то похожим. Пожалуйста, попробуйте заменить <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.

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

VicJordan ответил: 03 августа 2018 в 04:04
@ShashankHS Было бы неплохо, если бы вы могли создать рабочий фрагмент кода по вашему требованию, используя JSFiddle или Plunker и т. Д.