Почему происходит мигание анимации в Safari?

Question

[Elena_11]

Здравствуйте, возникла необходимость реализовать эффект листания страниц с помощью 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%;
}

Comments

[modelair]

код нерабочий. из общих рекомендаций - сделать transform: translate3d(0,0,0)

[Elena_11]

modelair, это выдержка кода из рабочего проекта. Весь код не привожу по понятным причинам, он будет занимать слишком много места. Единственное что стоило упомянуть, что через js добавляется класс active который листает страницы

setTimeout(function () {
        $('.page-1').addClass('active');


                 setTimeout(function () {
                         $('.page-2').addClass('active');
                          $('.page-2').css({ "z-index": "2" });

..........

                  }, 3500);
 }, 3500);

[Elena_11]

modelair, по поводу translate3d пробовала разные рекомендации из интернета, которые выглядят уже устрашающе, но по-прежнему не работают . Советуют еще 1px по z оси задавать, якобы кому-то помогает. Но не в этом случае..

.page-layer {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: transform 2.5s;
  transform: translate3d(0,0,1px);
  -webkit-transform: translate3d(0,0,1px);
  will-change: transform;
}

.page-layer.active {
  transform: rotateY(-180deg) translate3d(0,0,1px);
  -webkit-transform: rotateY(-180deg) translate3d(0,0,1px);
}

.page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 2px;
  left: 0;
  transform-style: preserve-3d;
  transform: rotateY(180deg) translate3d(0,0,1px);
  -webkit-transform: rotateY(180deg) translate3d(0,0,1px);
  will-change: transform;
}

.page-back img {
   backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page-face {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0;
  transform-style: preserve-3d;
  transform: translate3d(0,0,1px);
  -webkit-transform: translate3d(0,0,1px);
  will-change: transform;
}

[modelair]

Elena_11, если бы вы сделали codepen повторяющий проблему, было бы много проще

[Elena_11]

modelair, ок сейчас набросаю пример

[Elena_11]

modelair, https://codepen.io/jdnpfonr-the-solid/pen/zYbjdMz

[modelair]

Elena_11, обновите текст вопроса, заодно кто-то еще посмотрит.

[modelair]

Elena_11, если поснимать индексы и открыть в хроме то видно, почему это происходит. мне удивительно, что это в целом вообще работает.

я бы вам посоветовал все переделать заново. сделано довольно замудрено и сложно, поэтому разобраться не просто. тем более, это анимация выглядит и не совсем 3d, хотя сделана именно так. по сути вы просто делаете переход ширины изображения, одно сужается, другое расширяется. тоже самое. может на этом попробовать сыграть, если оно вам надо вообще.

я немного начал упрощать ваш код вот тут, продолжать не стал - можете вы.

[Elena_11]

modelair, Прежде чем советы давать в данной теме, сначала убедитесь что сами разбираетесь. Если вы снимите z-index, то страницы уходят под предыдущий слой! Страницы при открытии должна быть сверху, вас это совсем не смущает? Анимации сделана проще некуда, это обычный transform rotate, это переворот, а не изменение ширины.
Вы просто взяли снесли js-код с отложенной функцией, это поэтапная анимация, в которой происходят шаги анимации по времени, потому что там есть сценарий. Я не прошу переделывать js, я спрашиваю конкретные причины мигания в сафари, мне не нужны советы в духе "советую всё переделать", это не конкретика.

[modelair]

Elena_11, спасибо, я разбираюсь в этом вопросе довольно хорошо; такого ответа от вас я не ожидал.
то , что вам не понравился мой недоделанный черновик, значит, что мне можно высказывать поучительные слова? вы отвратительно делаете свою работу, вот что я могу сказать вам.

[Elena_11]

modelair, чел ты заявил что rotate это изменение ширины - ну смешно. Ты прислал нерабочий код, страницы не открываются корректно, они уходят под предыдущий слой. Ты не написал никакой конкретной конкретики и не прислал рабочего кода, при этом обесценил мою работу. Какую реакцию ты ждёшь? Поражают такие уникумы, которые приходят сюда самоутверждаться.

[modelair]

Elena_11, я не заявлял что поворот это изменение ширины, а имел ввиду, что визуально, в данном случае, это одно и то же. посему и порекомендовал поэкспериментировать в данном направлении. черновик я вам предложил ради небольшого рефакторинга вашего кода, где прописана аналогия в гораздо более упрощенном виде, что мне требовалось для нормальной отладки этого дела.
по поводу всего этого:
ваше мигание происходит из-за того, что вы меняете индексы, что в конкретном случае, по моему мнению, - не то, что нужно там делать(не потому что это - "происходит только в сафари"), что хорошо видно из происходящего на черновике во всех бразуерах. вы физически складываете слоя друг под друга, а потом пытаетесь их тусануть. это не нормально.

[szQocks]

Elena_11, а в самый первый раз анимация нормально отрабатывает ? если да то проблема в unset, с чем именно unset не понравился safari не подскажу, так как сафари живёт своей вселенной, в которой вечно баги

[Elena_11]

modelair, во всех браузерах всё нормально отрабатывает. z-index там в порядке страниц, потому что когда книга закрыта и когда она раскрыта порядок страниц разный. Логику включите и не пишите ерунду. В Вашем черновике 1 страница всегда поверх и страницы уходят вниз, чего быть не должно. Вы что сами не видите этого? И более того - вы просто взяли и снесли отложенные функции, которые управляют анимацией по времени.

[Elena_11]

szQocks, мигание начинается при наложении нескольких страниц. Причём это не во всех версиях сафари, а в более старых. В последней версии всё ок. Но у заказчика просьба была, чтобы работало в любых версиях. По собранной информации стало понятно, что сафари имеет действительно такую проблему с миганием при использовании свойства transform. То есть мой случай не уникальный.

Проблему удалось решить следующим образом: при раскрытии новой страницы, предыдущий слой просто скрываем любым подходящим способом .hide(), .FadeOut, или display: none. А активный слой делаем видимым .show, .FadeIn, display: block;
В некоторых случаях помогает добавление -webkit-transform: translate3d(0,0,0) и will-change: transform;

Вдруг кому-то пригодится.