Проблема с перерисованием Chrome

Я получаю нечетную проблему с перерисованием в chrome:

Screenshot

Посмотрите на нарушенную правую сторону? Это div с одним фоном img.

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url('../images/search_sortfilter_bg.png') no-repeat;
}
  • В любом другом браузере нет проблем.
  • Случается только в более новых версиях, мы заблокировали обновление, чтобы предотвратить внутренние проблемы.
  • Кажется, что это вызвано прокруткой вверх и вниз до завершения рендеринга.
  • Те же проблемы на нескольких сайтах

Кто-нибудь еще видел это? Кто-нибудь знает, что его вызывает или что Хром намеревается сделать?

версия Chrome 26.0.1410.64 m

Обновление

Проблема в Windows и Mac OS. На Mac на самом деле хуже.

Я мог бы прижать его дальше. Мы получаем ошибку на странице, содержащей большое количество больших изображений. Мне интересно, связано ли это с размером данных, которые требуется загрузить Chrome?

Похоже, что проблема устранена (не назовем ее исправлением):

"Возможно, новая версия Chrome просто не нравится ваш графический процессор. У меня были проблемы, похожие на ваши, и решили их отключая функции компоновки и 3D-ускорения.

Тип хром://в адресную строку и установите следующие элементы:

  • Компиляция графического процессора на всех страницах: отключено (три варианта в раскрывающемся списке.)
  • Отключить ускоренное 2D-холст: Включить (щелкните ссылку, которая говорит" Включить ", поле станет белым.)
  • Отключить ускоренный CSS animations: Enable (Как и выше, элемент станет белым.)
  • Затем нажмите кнопка, которая отображается в нижней части страницы. перезапустите хром и проверьте, если это сработало."

Из https://askubuntu.com/info/167140/google-chrome-with-strange-behavior

Update

Проблема, похоже, исчезла в более поздних версиях Chrome.

Ответы

Ответ 1

Chrome становится более грубым. Что-то стоит попробовать - это заставить аппаратное ускорение gpu на элементе.

Добавьте это в CSS для ускорения аппаратного ускорения:

-webkit-transform: translate3d(0, 0, 0);

Ответ 2

У меня были проблемы с этим в браузерах webkit, а не только в Chrome. Я решил это, поставив следующее правило на мой CSS:

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Это касается аппаратного ускорения для всех элементов, кроме svgs на FF/IE/Safari/Chrome, если поддерживается.

Я не применяю преобразование в тегах SVG, потому что по какой-то причине это заставляло мои svgs не отображаться должным образом, странно применяя это к элементам типа rect внутри самого тега, не вызывает никаких проблем.

Поэтому попробуйте добавить это правило в свой css и посмотреть, решит ли он вашу проблему.

Ответ 3

У меня была такая проблема при переключении display:none; display:block;

Например, с jQuery.toggle()

Этот элемент был просто оболочкой для содержимого, которое я хотел показать и скрыть. Таким образом, это его родитель, который будет расширяться или сжиматься вертикально. Это будет выглядеть так:

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

у ребенка-to-toggle не было правил стилизации, и, когда он скрыт, часть родителя неправильно перерисовывалась. (нижняя часть)

Затем я добавил правило css для переключения между дочерними элементами и проблема была решена. Похоже, добавление правила CSS приведет к некоторой перерисовке в этом случае.

Несмотря на принятый ответ, я добавляю это, потому что включение аппаратного ускорения на моем компьютере, Macbook pro, OSX Maverick, Chrome 36, полностью испортит интерфейс с артефактами, поэтому мне пришлось найти другой способ.

Добавление правила css может помочь. В моем случае я добавил граничную вершину для переключения между дочерними элементами.