I am having problems with fixed positioning, css-converted container and Safari. I am trying to display a dropdown when I click an item inside a modal. Modal carries css transform . To make sure the dropdown is always displayed above the modal, I set it as fixed (I calculate the left and top values with JS).
It works as expected in Chrome, Firefox, and Opera, but Safari shows strange behavior. According to W3C :
Any computed value other than none for conversion results in the creation of both a stacking context and a containing block. An object acts as a containing block for fixed placed descendants.
Thus, the fixed element inside the container converted to CSS should be positioned relative to this container instead of the viewport. But Safari doesn't seem to behave this way. See this example:
$(document).ready(function() { $(".show-liste").click(function() { $(".liste").show(); }); });
.modale { height: 50px; overflow-y: scroll; transform: translate(100px); } ul { position: fixed; left: 0px; top: 0px; } body { font-size: 80%; } .modale { position: absolute; top: 50px; padding: 60px; background-color: white; border: 1px solid #ccc; box-shadow: 2px 2px 2px #ddd; } button { width: 200px; } ul { list-style-type: none; margin-top: 0; padding-left: 0; width: 200px; display: none; box-shadow: 2px 2px 2px #ddd; } li { background: white; padding: 10px 20px; border: 1px solid #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modale"> <div class="row"> <div> <button class="show-liste">Open dropdown</button> <ul class="liste"> <li>Choice 1</li> <li>Choice 2</li> <li>Choice 3</li> <li>Choice 4</li> <li>Choice 5</li> </ul> </div> </div> </div>
Do you have an idea how to fix this? Any polyfill, any way around this problem? USING absolute positioning is a solution that I would like to avoid, since it involved moving the list at the level of the document body, and then processing its creation / destruction, an attached model (I use AngularJS), events, etc. This is really my last resort.
source share