Мобильный Safari Z-Index не работает

У меня есть плагин (intro-js) для создания вводного тура, содержащего непрозрачный оверлей с прожекторами на моих страницах.

Используя следующие правила CSS, я пытаюсь поднять элемент внутри класса introjs-showElement над всеми остальными элементами.

Как это может показать элемент в CSS как мои браузеры на рабочем столе? В настоящее время я вижу только белую коробку в моем css.

.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
  z-index: 99999998 !important;
}

.introjs-showElement>* {
  -webkit-transform: translateZ(1px) !important;
}

Пример HTML-кода Div Text и кнопок переключения не отображаются (все они существуют в плагине с угловыми данными с фиксированным заголовком и возможностью прокрутки)

<td class="td-nopadding ng-enter-fast ng-leave">
                      <div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
                          <div class="text-input">
                            <input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
                          </div>
                          <div class="inc-dec-buttons">
                            <button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
                                 <span class="glyphicon-plus"></span>
                             </button>
                             <br>
                             <button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
                                 <span class="glyphicon-minus"></span>
                             </button>
                           </div>
                        </div>

                    </td>
Источник

1 ответ

Решение

Это известная проблема с библиотекой:

...назвать несколько.

Проблема заключается в стековом контексте и способе, которым introJs заставляет элементы появляться сверху:

Библиотека требует, чтобы все родительские узлы целевого элемента находились в одном и том же контексте стекирования тела (например). position: fixed создает новый контекст стека transform).

Так что эта проблема не будет исправлена, пока introJs не изменит свою методологию, чтобы целевые элементы появлялись сверху.

Источник
Другие вопросы по тегам