Mobile Safari Z-Index Not Working

Question

我有一个插件（intro-js），用于创建包含我的页面div上的聚光灯的不透明叠加层的介绍性游览。

使用下面的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样品没有显示出来

<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

这是一个已知的问题与库（在固定报头滚动角的角度的数据表插件所有存在）：

• https://github.com/usablica/intro.js/issues/532
• https://github.com/usablica/intro.js/issues/507
• https://github.com/usablica/intro.js/issues/401
• https://github.com/usablica/intro.js/issues/123

...仅举几例。

的问题是，stacking context和的方式，使得introJs元素出现在最前面：

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

所以这个问题将不会被修复，直到introJs调整其目标元素的方法出现在顶部。