Transformacja CSS i ustalone pozycjonowanie w Safari

Question

Mam problemy ze stałym pozycjonowaniem, zmienionym css kontenerem i przeglądarką Safari. Próbuję wyświetlić listę rozwijaną po kliknięciu elementu wewnątrz modalu. Modal nosi css transform. Aby upewnić się, że lista rozwijana jest zawsze wyświetlana nad modalem, ustawiam ją jako stałą (obliczam wartości left i top używając JS).

Działa zgodnie z oczekiwaniami w Chrome, Firefox i Opera, ale Safari pokazuje dziwne zachowanie. According to the W3C:

Każda wartość kalkulowana żaden inny niż dla wyników transformacji w tworzeniu zarówno w kontekście układania i bloku zawierającego . Obiekt działa jako blok zawierający dla ustalonych pozycjonowanych potomków.

Tak więc stały element wewnątrz przekształconego kontenera CSS powinien być umieszczony relatywnie do tego kontenera, zamiast widoku. Wygląda jednak na to, że Safari nie zachowuje się w ten sposób. Zobacz poniższy przykład:

$(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; 
 
} 
 

 

 

 
/* --- Purely style related stuff ---- */ 
 

 
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>

Czy macie jakiś pomysł jak to naprawić? Jakieś polyfill, jakikolwiek sposób obejść ten problem? Używanie bezwzględnego pozycjonowania to rozwiązanie, którego chciałbym uniknąć, ponieważ oznaczałoby przesunięcie listy na poziomie treści dokumentu, a następnie obsługę jej tworzenia/niszczenia, dołączonego modelu (używam AngularJS), zdarzeń itp. To naprawdę moja ostatnia deska ratunku.

Answer 1

Wierzę, że można uzyskać pożądane zachowanie w różnych przeglądarkach, używając position:absolute zamiast position:fixed.