Преобразование CSS и фиксированное позиционирование в Safari

Question

У меня проблемы с фиксированным позиционированием, css-конвертированный контейнер и Safari. Я пытаюсь отобразить выпадающий список, когда я нажимаю элемент, внутри модального. Модаль несет css transform. Чтобы убедиться, что выпадающий список всегда отображается над модальным, я устанавливаю его как фиксированное (я вычисляю значения left и top с использованием JS).

Работает так, как ожидается, в Chrome, Firefox и Opera, но Safari показывает странное поведение. According to the W3C:

Любое вычисленное значение, отличное ни для преобразования результатов в создании как в контексте укладки и содержащего блока. Объект действует как содержащий блок для фиксированных потомков.

Таким образом, фиксированный элемент внутри конвертированного контейнера CSS должен располагаться относительно этого контейнера вместо видового экрана. Но похоже, что Safari не ведет себя так. Смотрите этот пример:

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

Есть ли у вас какие-либо идеи, как это исправить? Любой полиполк, любой способ обойти эту проблему? ИСПОЛЬЗОВАНИЕ абсолютного позиционирования - это решение, которое я бы хотел избежать, поскольку это подразумевало бы перемещение списка на уровне тела документа, а затем обработку его создания/разрушения, прикрепленную модель (я использую AngularJS), события и т. Д. Это действительно мой последний курорт.

Answer 1

Я полагаю, что вы можете получить желаемое кросс-браузерное поведение, используя position:absolute вместо position:fixed.