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

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

    .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.
    Ответ написан
    1 комментарий