Mobile Safari Z-Index Not Working

Question

I have a plugin (intro-js) for creating an introductory tour containing a opaque overlay with spotlights on my page divs.

Using the following css rules I try to bring up the element within class introjs-showElement above all other elements.

How can it show the element in css like my desktop browsers? Currently I only see a white box in my css.

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

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

HTML Sample of Div Text and Toggle Buttons not showing up (all exist in a fixed header scrollable angular angular datatable plugin)

<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

This is a known issue with the library:

• 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

...to name a few.

The issue is the stacking context and the way that introJs makes elements appear on top:

The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).

So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.