Position fixed not working in Safari Version 8.0.2

问题:

I am working with an angular application and im inside a twitter bootstrap modal.

Im attempting to re-position a button that exists in the body of the modal to the modal footer using fixed position. That button fires a function unique to the current modal-body scope and I need it to remain in view regardless of scroll position. The modal-header and modal-footer are always in view and the modal-body overflow scrolls accordingly under those elements.

Everything works as expected in Chrome.

Ive seen multiple problems others have had with fixed positioning and Safari and I have attempted to use those work-arounds including:

-webkit-transform:translateZ(1px); 

Ive also seen that removing

transform: translate3d(0, 0, 0) ;

has helped in some situations but that rule is added to the bootstrap modal-dialog by default and removing that isn't an option for me because of a long list of out of place elements when it's removed.

In addition to those attempts I have tried placing the button inside a parent element w/ absolute positioning as well as a parent w/ fixed positioning and also attempted to remove the parent element and just place the button itself, none of which worked for me.

the CSS:

.stickyBut{
   position: fixed;
   bottom: 16px;
   left: 605px;
   z-index: 999999;

   /* -webkit-transform:translateZ(10px); failed */ 
} 
.but-hold{
   z-index: 999999; 
   width: 100%;
   height: 25px;
   position: absolute; 
   /* position: fixed; */
   top: 0;
   left: 0;

  /* FAILED
  -webkit-transform:translateZ(1);
  */
}

the HTML:

<div class="but-hold">
    <button class="btn btn-warning stickyBut" ng-click="submitProfile()">Save + Continue</button>
</div>

Any other workarounds or suggestions greatly appreciated - thank you much!

回答1:

Unfortunately, I never solved this problem with CSS, instead I had to rethink & rebuild the modal design for each of the modals that were being affected - removing all the fixed positioned elements, duplicating the innards for every modal in the markup instead of relying on angular to do it for me-

and upon further investigation ive learned new facts about z-index & the stacking context that could be the cause of the root issue

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion! Phillip Walton Article

回答2:

I had faced similar issue. Applying position:fixed to a child whose parent has transform style will not behave as expected. This is a bug in webkit.

To solve, either remove the transform in the parent or move the element out of the parent which has the transform style.

This could be a case for the bootstrap modal.