移动版 Safari Z-Index 不工作

Question

我有一个插件 (intro-js) 用于创建一个介绍性导览，其中包含一个不透明的覆盖层，在我的页面 div 上有聚光灯。

使用以下 css 规则，我尝试将 class 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 文本和切换按钮示例未显示（全部存在于固定 header 可滚动 angular angular数据表插件）

<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>

Answer 1

这是图书馆的一个已知问题：

...仅举几例。

问题在于 stacking context 以及 introJs 使元素出现在顶部的方式：

库要求目标元素的所有父节点都在主体的相同堆叠上下文中（例如）。 position: fixed 创建一个新的堆叠上下文（transform 也是如此）。

因此，在 introJs 调整其使目标元素出现在顶部的方法之前，此问题不会得到解决。

移动版 Safari Z-Index 不工作

Mobile Safari Z-Index Not Working

html

css

mobile-safari

intro.js