По какой-то причине, которая неизвестна мне и нескольким другим разработчикам, анимированные строки, показанные здесь, не хотят появляться в Safari 11 и выше. Когда вы прокручиваете вниз к белому разделу, серые линии должны анимироваться во время прокрутки, но это не так. Это линии шириной 1px, показанные в CSS как
- Это происходит только в Safari 11 и выше, отлично работает на FF / Chrome
- Некоторые гипотезы, которые мы имеем до сих пор include сглаживание, вызывающее проблемы
- Еще один потенциально связан с сеточной совместимостью
- Еще один возможный из-за скрипта Luxy. js, который влияет на переполнение родительского элемента. (Контейнер имеет идентификатор Luxy для запуска сценария)
- Даже при отключении анимации строки не отображаются
Пример сайта: https://lines-test.webflow.io/
Контейнер линий сетки:
.c-grid-lines {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 1;
display: -ms-grid;
display: grid;
overflow: hidden;
justify-items: start;
grid-auto-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-areas: ".";
-ms-grid-columns: minmax(40px, 1fr) 0px minmax(0px, 1fr) 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px minmax(0px, 1fr) 0px minmax(40px, 1fr);
grid-template-columns: minmax(40px, 1fr) minmax(0px, 1fr) 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr minmax(0px, 1fr) minmax(40px, 1fr);
-ms-grid-rows: auto;
grid-template-rows: auto;
}
Линия сетки:
.c-grid-line {
width: 1px;
height: 100%;
background-color: hsla(0, 0%, 93.7%, 0.7);
Анимация:
transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
Был бы очень признателен за некоторую помощь! Спасибо