Очень трудно решить и странную проблему перехода непрозрачности CSS3 (... должна быть ошибка?)

Я полностью разорвал все свои волосы с этой очень расстраивающей и странной проблемой CSS, которую я испытываю.

Я использую Bones templateplate, чтобы сделать сайт, и это было здорово, до сих пор...

Он использует систему жидкой сетки, и я недавно попытался создать простую галерею, которую я сделал в сетку (4 изображения, каждая из которых завернута в четверть столбца, причем первые/последние классы добавлены к первым/последним изображениям).

Если вы зависаете над изображениями (особенно заметными в первых трех по некоторым причинам), вы заметите, что они меняют ширину на пиксель или два по какой-то сумасшедшей причине. Изображения установлены на max-width:100%, и я чувствую, что это как-то виновник, потому что, если вы даете изображениям "фиксированную" ширину (пример .gallery-icon img {max-width:165px;}, он исправляет проблему, но, будучи жидкостной сеткой, я не могут спуститься по этому маршруту, так как при изменении размера браузера изображение останется 165 пикселей, и даже если я установил 4 разных ширины в зависимости от носителя, между размерами медиа, изображения не будут правильно выравниваться.

Если бы не проблема с эффектом transition (если я отключу transition, изображения ниже opacity в порядке, но без анимации), он будет работать так, как я хочу, чтобы он работал: (

Пожалуйста, помогите парням!

Вот пустой демонстрационный сайт, на котором работает кодовое кодирование, и ничего больше, чем галерея на странице. Дайте мне знать, если вы видите трясущуюся проблему.

(я не мог воссоздать его на jsfiddle, поэтому я установил его на старый домен, где я лежал, хе-хе)

EDIT: Я только заметил, что проблема, похоже, происходит с изображениями, которые больше, чем div как по ширине, так и по высоте. Изображения 1 + 3 - это, и у них есть ошибка, тогда как изображения 2,4 кажутся в порядке? а изображения 2 + 4 имеют меньшую высоту, чем div..... Но даже если я установил изображения max-height, проблема будет продолжаться.

EDIT2: добавлено быстрое видео, чтобы показать проблему (последние версии Firefox и Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

ОТВЕТЫ

Ответ 1

Я бы сказал, что это действительно ошибка в Chrome (я использую 24.0.1312.57 м).

Проблема на самом деле не на изображениях 1 + 3, я видел их на изображении № 2.

Я думаю, что проблема возникает, когда ширина изображения является долей (скажем, 146,71 px). В стационарном дисплее это округляется до 146 пикселей. При переходе это округляется вверх (вернее!) До 147 пикселей.

Ответ 2

Благодаря vals для указывая на аспект GPU... Это напомнило мне этот CSS-фрагмент, который имеет тенденцию решать проблемы с рендерингом Chrome:

-webkit-transform: translateZ(0);

Я применил это к контейнеру (div.post), содержащему проблемный элемент (i.icon-), который имеет ширину доли, проблема решена!

Кредит: у меня есть это решение из этого ответа, чтобы исправить неправильно отображаемые (фиксированные) элементы после перехода на привязку к странице.

Ответ 3

используйте следующую подсказку css, чтобы продвинуть затронутый элемент на новый составной слой (он решил для меня такую ​​же самую проблему):

.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}

Это означает, что композитор изолирует процесс рисования элемента в новый составной слой. При проверке слоев в инструментах chrome dev вы можете убедиться, что элемент был продвинут, а затем проблема решена. Элемент появится в новом слое со следующими причинами "Составление": имеет активную ускоренную анимацию или переход. Имеет подсказку для изменения композиции.

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

Иван.

Ответ 5

Я предлагаю использовать jQuery для обработки вашей непрозрачности, а не для использования атрибутов CSS3, потому что вы правы в том, что ваша максимальная ширина бесполезна, с переходом.

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

Использование jQuery позволит исправить множество этих небольших сбоев с переходами и убедиться, что изменение непрозрачности выполнено с помощью кросс-браузера (да, я знаю, что существует множество тегов для переходов для браузеров, но нет атрибутов для всех браузеров.):) Надеюсь, что это поможет!