CSS Transform вызывает ошибки рендеринга в FancyBox 3 в Safari
Я использую FancyBox 3.
На странице используется преобразование CSS для создания 3D-наведения и анимации «переворачивания карты».
-webkit-transform : rotateY(180deg);
transform : rotateY(180deg);
-webkit-transform : rotateY(15deg);
transform : rotateY(15deg);
Однако в Safari (и в мобильном Safari) преобразования CSS вызывают проблемы с отрисовкой в FancyBox 3.
Ат выглядит так, как будто все, к чему применено свойство преобразования, частично или полностью находится над лайтбоксом.
(См. это изображение здесь, другое изображение здесь, а также живая версия здесь.)
Когда я удаляю свойство преобразования, проблема исчезает.
У Chrome и Firefox нет проблем, и лайтбокс работает должным образом.
Есть идеи, что вызывает это и каково решение?
Обновлено: я должен упомянуть, что на этой странице есть два эффекта преобразования.
Первый - 15 ° только при зависании.
Второй - 180 ° при щелчке.
Любой из них вызывает одни и те же проблемы.
@TorjescuSergiu Я отредактировал свой пост. 15 ° предназначены только для состояния зависания. При щелчке применяется преобразование на 180 °.
Теперь ссылка показывает другой контент
Я не мог узнать, как запустить fancybox на вашей странице. Кроме того, в вашем коде есть ошибка JS.
@TorjescuSergiu Я обновил URL
@Janis Я обновил URL. Вы должны нажать «познакомиться с кулинарным ботаником».
Ответы 2
Удалите эффект: hover для устройств размером меньше 996 пикселей (так что сделайте экран мультимедиа и используйте min-width:996px;), он вам не нужен на планшете или телефоне, которые не используют мышь, когда вы наводите курсор.
Во-вторых, на экране мультимедиа max-width:995px; удалите ресурсы и 2 ссылки, которые у вас есть на обратной стороне карт, это слишком много информации, и уменьшите font-size и line-height, сделав его отзывчивым.
Спасибо. Но я не уверен, связано ли это с проблемой сафари? Я вижу, что это может частично решить проблему с мобильным сафари, но я все еще не уверен, что это значит со странной проблемой рендеринга в обычном сафари.
Я не мог узнать, как исправить эту проблему с Safari, возможно, попробую сделать по-другому - отключить все переходы, пока fancybox активен, что-то вроде этого (не проверено; вам может потребоваться настроить, чтобы работать на вас):
body.fancybox-active .card * {
transition: none !important;
}
Что ж, насколько я вижу, он не работает хорошо ни в Chrome, ни в Mozilla, если я использую поворот на 180, в живой версии он установлен на 15. Когда вы наводите курсор на поле, оно мерцает, потому что div вращается. и при наведении указателя мыши цель теряется, поэтому решением по этому вопросу было бы использование: hover для класса той же высоты или вставка другого div ниже вместо использования его на карте.