Нет более релевантной темы, которую я нашел для проблемы, с которой я столкнулся, но это связано с вышеупомянутой проблемой.Таким образом, может быть полезным для некоторых.
В двух словах: у меня есть контейнер (всплывающее окно), некоторые элементы внутри.Появление происходит следующим образом: фон контейнера исчезает до темноты из-за непрозрачности, а элемент внутри увеличивается (например, приближается к нам сзади).Все отлично работает везде, но не в Safari (Mac / Win / iPhone).Safari «изначально» показывает мой контейнер, но мигает странным образом (появляется крошечная короткая вспышка).
Только добавление -webkit-transform: translateZ (0);(в контейнер !!!) помогло.
.container {
-webkit-transform: translateZ(0); /* <-- this */
}
.container section {
-webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
-webkit-transition: -webkit-transform .4s, opacity .3s;
opacity:0;
}
.container.active section {
-webkit-transform:translateZ(0) scale(1);
-webkit-transition: -webkit-transform .3s, opacity .3s;
opacity:1;
}
Но, говоря о переходах, была также следующая часть кода:
.container {
...
top:-5000px;
left:-5000px;
-webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
-webkit-transition: opacity .5s;
top:0;
left:0;
width:100%;
height:100%;
}
, учитывая, что я хочу показать / скрыть всплывающее окно, используя только CSSпереключение (а также чтобы заставить его исчезнуть, вместо этого просто «display: none»).
так, каким-то образом при появлении Safari (очевидно) наследовал свойства перехода, кроме «opacity», даже если я их перегружал только-webkit-transition: непрозрачность .5s;
Итак, добавление следующего решило проблему:
.container {
...
-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}