CSS Transform вызывает мерцание в Safari, но только при ширине браузерa >= 2000 пикселей

Вы читаете это правильно. Протестировано на нескольких машинах в офисе, и единственная разница между сценариями была размером браузера. Сотрудник сузил его до 2000px сладкое пятно. Lo-and-behold, когда мы каждый изменяем размеры наших браузеров, чтобы быть >= 2000px широко и мыши над элементом с анимацией трансляции, различные элементы на странице - в частности, любой элемент с фоном градиента CSS - мерцает. И наоборот, если вы измените размер браузера, чтобы быть < 2000px широкий и мышь над этим же элементом не мерцает.

Кто-нибудь еще видел это странное поведение? Почему 2000px - волшебное число, и что именно происходит при 2000px?

ПРИМЕЧАНИЕ. Я не могу по-настоящему поделиться снимками экрана/видео/ссылками, поскольку этот сайт еще не открыт, а код относительно не нужен, поскольку, похоже, это больше проблема браузера, чем что-либо.

ПРИМЕЧАНИЕ 2. Мой вопрос здесь действительно о том, что именно происходит в Safari в 2000px, не обязательно, как исправить мерцание с помощью backface-visibility или translateZ или тому подобного. Причина состоит в том, что мы используем -webkit-font-smoothing: subpixel-antialiased; либерально на всем сайте и используем любой из этих трюков, которые превосходят это свойство для всей страницы, включив антиалиасинг/оттенки серого для всего текста.

EDIT - Хорошо, извините, что раньше этого не делали. Вот немного кода в jsFiddle, который должен воспроизвести проблему: http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

Помните, что для этого Safari должен быть установлен как минимум на 2000 пикселей.

Ответ 1

Разочарование да?

См. EDIT4 для ответа на вопрос, почему 2000px является магическим числом.

Есть несколько вещей, которые вы можете попробовать.

Добавьте -webkit-transform-style: preserve-3d; к элементам, которые мерцающий.
добавить -webkit-backface-visibility: hidden; к элементам, которые мерцающий.
перемещать анимационный элемент вне родителя мерцающий элементы находятся внутри.

EDIT - Уэсли Хейлз, сказал здесь "Я столкнулся с глючным поведением при применении аппаратного ускорения к частям страницы, которые уже были ускорены"

Сложно помочь вам отладить это без какого-либо кода. Но для начала я предлагаю вам включить режим отладки в сафари. Write 'defaults write com.apple.Safari IncludeInternalDebugMenu -bool true' в терминале.

После этого появится меню Debug. Выберите флаги Рисование/Композиция > Показать границы композиций.

Это поможет вам понять, что отображается, и тем самым выбрать, что вводить в аппаратное ускорение и что не учитывать.

EDIT2 - Это стоит проверить также: fast-animation-with-ios-webkit

Это касается iOs, но я испытал это - в некоторых случаях решения, работающие на iOs, также работают на osx.

EDIT3 - Если вы просто спрашиваете, что происходит, когда он превышает 2000 пикселей, я могу точно сказать вам, что на iPhone'е WebKit создает текстуры размером не более 1024 на 1024, и если ваш элемент больше этого, он должен создавать несколько текстур.

Документация по ограничениям текстуры

Теперь, когда они делают это на iPhone, меня не удивит, если они сделают то же самое в OsX, но имеют более высокий предел.

Не знаю, это твой случай. Невозможно сказать без какого-либо кода.

EDIT4 - "Реализация в TextureMapperTiledBackingStore довольно проста и используется только для работы с ограничением размера текстуры 2000x2000 в OpenGL".

Итак, если ваш элемент больше 2000x2000, он должен создавать несколько текстур.

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

Ответ 2

Я обнаружил, что, применяя -webkit-backface-visibility: hidden; к переводчику и -webkit-transform: translate3d(0, 0, 0); ко всем своим дочерним элементам, мерцание затем исчезает.

Пожалуйста, обратитесь Предотвратить мерцание на веб-кадре-трансформирование webkit-transform.

Ответ 3

Если шрифты мерцают, используйте следующий CSS:

html,body {
    -webkit-font-smoothing: antialiased;    
}

Ответ 4

Я заметил, что после применения CSS3 элементы преобразования в Chrome выглядят немного "хрустящими" и неровными. Решения в ответе Матиаса не влияют на это. Но вот странно - после того, как я применил фильтры webkit (т.е. -webkit-filter: opacity(0.99999);), элементы, обработанные должным образом, и буквы в тексте выровнены. Но после этого эти элементы немного размываются. Возможно, это влияет на ваше мерцание.

Ответ 5

Прежде всего, благодаря отличным решениям, предлагаемым здесь. Я всегда думал, что в прошлом, должно быть, что-то не так с моим кодом. Это не было. Я также объяснил, что граница 2000px для анимаций не работает гладко. Спасибо вам, ребята, я теперь добавляю

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}

Я сделал это условно, потому что на самом деле фотографии не отображают сглаживание после добавления класса. В другом месте я сделал

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}

и добавил и удалил дополнительный класс через JQuery. Таким образом, переходы гладкие и рендеринга после завершения (снова удаление класса) Немного сложный, но он отлично подходит для меня и, наконец, делает анимацию в Safari выше 2000 пикселей ровной. Отличная работа, ребята!!

Ответ 6

Простым решением, которое разрешило все мои проблемы, было следующее:

.app * {
  transform-style: preserve-3d;
}