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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

..........

                  }, 3500);
 }, 3500);

Как сделать ссылку на слайд Swiper с текущей и другой страницы?

Виталий Першин, Спасибо! Это полностью решает задачу

Как сделать ссылку на слайд Swiper с текущей и другой страницы?

а ссылку-то как писать корректную? с другой страницы особенно интересует как осуществляется переход (если он возможен вообще)

Как оптимизировать новостной сайт на 16000 записей?

mayton2019, предпочитаю общаться на вы. Вы же понимаете, что перед тем, как задавать такие вопросы, была проведена некоторая аналитика. "Конечно не огромных", это означает что каждая картинка весит не более 100-200кб в среднем. Есть конечно исключения. Если бегло пробежаться по папкам - видео занимает не более 10-20%. Но как понимаете зайти в каждую папку с 2010 года и достоверно убедиться физически нереально.
Опять же при любом объеме медиа-файлов новостной сайт будет расти со временем и тут возникает вопрос как грамотно организовать процесс хранения данных, чтобы не вырастить неповоротливого монстра, который растёт с геометрической прогрессией

Как оптимизировать новостной сайт на 16000 записей?

GeKskill, 1) повышать планируем, но на будущее все равно возник вопрос, 50гб для сайта это большая цифра. А когда будет 100гб, то по фтп сайт скопировать будет наверное неделю занимать?)
2) Предложение с CDN звучит разумно, правда осилят ли контент-менеджеры работу с ними. И опять же они платны, но вариант рабочий вполне, в крайнем случае думаю можно прибегнуть.
3) Разумный совет, можно обратить внимание.
Спасибо за толковые мысли

Как оптимизировать новостной сайт на 16000 записей?

mayton2019, конечно именно медиа (картинки и видео) занимают основной объём данных. Хотя сами отдельные медиа не огромных размеров, но из-за их кол-ва сжирается объём памяти

Остановка замедленного owl-carousel?

William Miller, подскажите, при помощи какого плагина в итоге решили проблему?

Что быстрее: Owl carowsel или Slick Slider?

Виталий Першин, странное заявление, т.к. каждый выбирает инструменты исходя из задачи и потребностей. Owl и Slick используют по сей день, т.к. они обладают необходимым функционалом и позволяют реализовать поставленные задачи. Хотя про Slick не могу ручаться, но owl меня ещё ни разу пока не подводил) Если уж и хвалите какой-то плагин, то хотя бы обоснуйте чем он лучше

Как сделать регистрацию по номеру телефон на wordpress?

Евгений Перин, у вас получилось это реализовать?

Остановка замедленного owl-carousel?

William Miller, да всё верно, а вы её пытались под себя приспособить? подошло?

Остановка замедленного owl-carousel?

William Miller, вроде где-то мельком видела, что в slick слайдер можно реализовать. Но в демо у них на сайте такого не вижу, также на сайте на котором видела такую карусель используется вот этот скрипт https://swiperjs.com/swiper-api
Но там в демо тоже нет такого. Надо пробовать.
У меня проблема в том, что на owl вся страница свёрстана и менять из-за одной карусели скрипт совсем уж не хочется. Тем более пока уверенности полной нет на что именно.

Остановка замедленного owl-carousel?

William Miller, а вы уже знаете с какой каруселью можно реализовать это? Или тоже пока в поиске?

Остановка замедленного owl-carousel?

William Miller, хотя озвученные проблемы наверное вас не касаются, потому что у вас стартует при наведении, а у меня вообще постоянно должна скользить. Если найдёте решение лучше, то поделитесь, пожалуйста