Почему свойство CSS «perspective» в Safari ломает оптимизацию графики для 4К и 5К дисплеев в случае повторного использования?

Question

[voker2005]

Добрый день.

Я использую вот такой скрипт от тумпануса, эффект SCALE & ROTATE PUSHER:

Есть у меня вот такой вот блок
.st-effect-11.st-container {-webkit-perspective: 1500px;perspective: 1500px;}
собственно логика его такова, при нажатии на кнопку, блок st-container отобразится в перспективе


Вот тут и мои грабли и сам вопрос:
Все объекты в блоке st-container работают хорошо на 4К и 5К дисплеях! НО! Если к какому либо блоку применить другое правило perspective, то даже текст\шрифт внутри этого блока, отображается на 4К и 5К заблуренным. На обычных дисплеях этого не видно.

Есть ли у кого идеи как это пофиксить?

-------------
Я пробовал прописать блоку в дефолт состояние

st-container {-webkit-perspective: none;perspective: none;}

А когда жмем кнопку, получается включается это понятие

.st-effect-11.st-container {-webkit-perspective: 1500px;perspective: 1500px;}

Не помогло!

Помогает только полное уделение перспективы к этому блоку:
.st-effect-11.st-container {}
Но пропадает красивый эффект открытия блока.

Comments

[jamtuson]

will-change: transform пробовали?

[voker2005]

jamtuson, что-то у меня не получилось найти ему применение в данной ситуации.
Попробовал прописать данное правило в разных вариациях, ускорения не заметил, также не заметил и решения вопроса :( может конечно не те блоки выбирал, но перепробовал много вариантов, вплоть до метода тыка.

И да, я забыл уточнить что данная ситуация наблюдается только в Safari.

[jamtuson]

voker2005, не все версии сафари поддерживают это свойство. Также, можете попробовать включить аппаратное ускорение с помощью transform: translate3d(0, 0, 1px); для блока, который смещается. Или попробовать изменить метод рендера шрифта:
-webkit-font-smoothing: subpixel-antialiased;
gearmobile.github.io/css/css3-font-smoothing

[Александр Баталов]

will-change: transform нужно использовать только тогда, когда вы точно понимаете, что делаете.
Например, браузер вообще может игнорировать свойство в целях оптимизации. Кстати, все приличные браузеры на больших элементах так и делают.
translate3d(0, 0, 1px) неминуемо отправит рендер блока на видеокарту, что гарантированно создаст мыло для текста. Тут как раз все дело в том, что нужно отключать аппаратное ускорение после завершения анимации. Нет аппаратного ускорения - рендеринг отправляется на процессор, и шрифты рендерятся нормально. Есть аппаратное ускорение - шрифты рендерятся "как получится": могут быть неотличимы от рендеринга без ускорения(четкими), а могут упасть в мыло.
-webkit-font-smoothing: subpixel-antialiased; здесь ничем не поможет(если только ну совсем чуть-чуть). Есть блок, его размер, например, 300х1000. Этот блок для ретина экранов рендерится в размере 2x, то есть это уже 600x2000. Так как браузер понятия не имеет, какой внутри блока контент, то блок рендерится так, как будто там все постоянно меняется каждую секунду, и чтобы держать 60 FPS, все рендерится в уменьшенном виде. Поэтому получается мыло, так как мы 300х1000 пытаемся отскейлить в 2 раза. На слабых компьютерах с sd-дисплеями браузер сначала делает даунскейл, а потом увеличивает получившийся рендер до размеров блока - так быстрее.
Загляните в DevTools во вкладку Layers(Chrome/Safari), это хотя бы даст представление сколько слоев композиции у вас на странице, и каковы причины создания этих слоев. Вот от туда и плясать.

Answer 1

[profesor08]

Ну да, тут ничего не поделать.
Можешь попробовать задать трансформируемому блоку transform : perspective(1px) translate..., тоесть изменить правило так, что в нем оказалось perspective(1px).

Comments

[voker2005]

Спасибо. Я попробовал добавить свойство perspective(1500px) для .st-effect-11.st-menu-open .st-pusher

.st-effect-11.st-menu-open .st-pusher {
    perspective(1500px) translate3d(100px, 0, -600px) rotateY(-20deg)
}

Что имеем?
1. Мыло пропало и это очень хорошо!
2. НО! Немного изменился эффект! Подробнее смотрите видео (ссылка на youtube, 2 минуты с хвостиком).

Вот по пункту 2, может быть есть соображения как это пофиксить путем CSS? Чтобы эффект был больше похож на оригинал, без мальца косых съездов этих блоков.

[profesor08]

Сделай как в оригинале. И сделай так:

.st-effect-11.st-menu-open .st-pusher {
    perspective(1px) translate3d(100px, 0, -600px) rotateY(-20deg)
}

Заменить: perspective(1px), единичка. Старую перспективу у контейнера надо оставить.

[voker2005]

Получилось вот так ))
Вопрос решить не удалось.

Answer 2

[Александр Баталов]

Выше написан возможный вариант. Попробуйте прописать перспективу непосредственно для нужного элемента.

.st-effect-11.st-menu-open .st-pusher {
    perspective(1500px) translate3d(100px, 0, -600px) rotateY(-20deg)
}
.st-effect-11.st-container {}

Еще, для сайдбара лучше всего после анимации обнулять параметры transform. То есть навесить коллбек на событие transitionend, и после обычным margin/left/top назначить для сайдбара необходимую позицию. Соответственно, перед тем как сайдбар прятать, ему нужно вновь вернуть значения transform, затем удалить те смещения которые вы навесили в коллбеке, и только после этого выполнять команду на скрытие. Если будете так делать, то обязательно заверните код в requestAnimationFrame, это нужно для того, чтобы браузер пересчитывал стили именно в той последовательности, в какой нужно вам, иначе стили будут назначаться разом, и будут проявляться странные эффекты(анимация же выполнятся через transition)

let stMenuTransformPrevious, stMenuTransitionPrevious = ''

// after open
requestAnimationFrame(function() { // выполняем действия в новом кадре композиции
  stMenuNode.style.transition = 'none' // убираем transition, так как после мы убираем transform

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.transform = 'none'
    stMenuNode.style.left = '0px'
  })
})

// before close
requestAnimationFrame(function() {
  stMenuNode.style.transition = '' // возвращаем transition из css

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.left = '' // в зависимости от того, как до этого двигали меню
    stMenuNode.style.transform = '' // применяется transform из css
  })
})

Применительно именно к вашему случаю, stMenuNode.style.left = '0px' назначать не нужно, так как меню и так по умолчанию находится слева.

Причина блюра на тексте в том, что для высокого разрешения просто не хватает аппаратных ресурсов, чтобы картинку рендерить и с ускорением, и в высоком разрешении. Такой же эффект с блюром появляется и на sd-дисплеях. Вообще лучше transform использовать только для анимаций, и, если возможно, после завершения анимации для лучшего рендеринга и разгрузки позиционировать элементы margin/left/top.

Comments

[voker2005]

Я попробовал добавить свойство perspective(1500px) для .st-effect-11.st-menu-open .st-pusher

.st-effect-11.st-menu-open .st-pusher {
    perspective(1500px) translate3d(100px, 0, -600px) rotateY(-20deg)
}

Что имеем?
1. Мыло пропало и это очень хорошо!
2. Немного изменился эффект! Подробнее смотрите видео (ссылка на youtube, 2 минуты с хвостиком).

Вот по пункту 2, может быть есть соображения как это пофиксить путем CSS? Чтобы эффект был больше похож на оригинал, без мальца косых съездов этих блоков.