Здравствуйте, возникла необходимость реализовать эффект листания страниц с помощью CSS, по задумке анимации это альбом с фотографиями, которые располагаются с лицевой и обратной стороны каждой страницы.
Делала по чужому примеру использую свойство backface-visibility: hidden; и во всех браузерах вроде бы всё ок, но в Safari, когда страница открывается и приходит в конечное положение на секунду моргает.
Этот баг есть только в Safari и не получается никак от этого мигания избавиться. Из-за чего это может быть и как побороть?
Посмотреть как выглядит баг в Safari:
>>Тык<<
Пример анимации на code open:
https://codepen.io/jdnpfonr-the-solid/pen/zYbjdMz
<div class="albom">
<div class="page-layer page-3">
<div class="page-face">
<img src="img/photo-4.png" alt="">
</div>
<div class="page-back">
<img src="img/photo-5.png" alt="">
</div>
</div>
<div class="page-layer page-2">
<div class="page-face">
<img src="img/photo-2.png" alt="">
</div>
<div class="page-back">
<img src="img/photo-3.png" alt="">
</div>
</div>
<div class="page-layer page-1">
<div class="page-face oblozhka">
<img src="img/oblozhka.png" alt="">
</div>
<div class="page-back">
<img src="img/photo-1.png" alt="">
</div>
</div>
</div>
.albom {
position: absolute;
width: 1452px;
height: 600px;
top: 30%;
right: 2%;
will-change: transform;
}
.page-layer {
position: absolute;
width: 50%;
height: 100%;
top: 0;
right: 0;
transform-origin: left;
transform-style: preserve-3d;
transition: transform 2.5s;
-webkit-transform: translate3d(0,0,0);
will-change: transform;
}
.page-layer.active {
transform: rotateY(-180deg);
}
.page-back {
position: absolute;
width: 100%;
height: 100%;
top: 2px;
left: 0;
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.page-face {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
}
.page-back img,
.page-face img {
width: 100%;
}
Средний
