Muy difícil de resolver y extraño problema de transición de opacidad CSS3 (must debe ser un error?)
Estoy absolutamente arrancando todo mi cabello con este problema CSS altamente frustrante y extraño que estoy teniendo.
Estoy usando el Bones boilerplate para hacer un sitio web, y ha sido genial, hasta ahora...
Utiliza el sistema de cuadrícula fluida y recientemente he intentado crear una galería simple que he hecho en una cuadrícula (4 imágenes, cada una envuelta en una cuarta columna, con primeras/últimas clases agregadas a las primeras/últimas imágenes).
Si pasa el cursor sobre las imágenes (especialmente notable en los tres primeros por alguna razón), notará que cambian de ancho por un píxel o dos por alguna razón loca. Las imágenes están configuradas en max-width:100%, y tengo la sensación de que esto es de alguna manera el culpable, porque si le das a las imágenes un ancho "fijo" (ejemplo .gallery-icon img {max-width:165px;}, soluciona el problema, pero al ser un sistema de cuadrícula fluido, no puedo ir por esa ruta, ya que las imágenes permanecen 165px si redimensiona el navegador, e incluso si establezco 4 anchos diferentes dependiendo de los medios, las imágenes no se alineaban correctamente.
Si no transition problema de efecto (si me dirijo a los transition off, las imágenes inferiores opacity bien, pero sin animación), funcionaría como quiero que funcione :(
Por favor, ayuda chicos!
Aquí hay un sitio de demostración vacío que tiene el boilerplate de bones en ejecución y nada más que la galería en la página. Avísame si ves el problema de los temblores.
(No pude recrearlo en jsfiddle, así que lo instalé en un dominio antiguo que tenía por ahí jeje)
EDITAR: Acabo de notar que el problema parece suceder a las imágenes que son más grandes que el div tanto en ancho como en alto. Imágenes 1 + 3 son esto y tienen el error, mientras que las imágenes 2,4 parecen estar bien? y las imágenes 2 + 4 tienen una altura menor que la div..... Pero incluso si establezco la altura máxima de las imágenes, el problema continúa..
EDIT2: Se agregó un video rápido para mostrar el problema (último Firefox y Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw
5 answers
Yo diría que es realmente un error en Chrome (estoy usando 24.0.1312.57 m).
El problema no está realmente en las imágenes 1 + 3, lo he visto en la imagen número 2.
Creo que el problema surge cuando el ancho de la imagen es una fracción (digamos 146.71 px). En la pantalla estacionaria, esto se redondea a 146 px. En la transición esto se redondea hacia arriba (¡más correctamente !) a 147 px.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-24 20:22:41
Gracias a vals por señalar el aspecto de la GPU... Esto me recordó a este CSS-Snippet que tiende a resolver problemas de representación de Chrome:
-webkit-transform: translateZ(0);
He aplicado esto al contenedor (div.post) que contiene el elemento problemático (i. icon -) que tiene un ancho de fracción, problema resuelto!
Crédito: Tengo esta solución de esta respuesta para corregir elementos incorrectamente renderizados (fijos) después de navegar a un ancla de página.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:32:33
Use la siguiente sugerencia css para promover el elemento afectado a una nueva capa compuesta (Me resolvió exactamente el mismo problema):
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
Esto indica que el compositor debe aislar el proceso de pintura del elemento en una nueva capa compuesta. Al inspeccionar las capas en chrome dev tools, puede asegurarse de que el elemento se haya promovido y, por lo tanto, se haya resuelto el problema. El elemento aparecerá en una nueva capa con las siguientes ' Razones de composición: tiene una animación acelerada activa o transición. Tiene una sugerencia de composición de will-change.'
Parece que después de promover el elemento a una nueva capa de esta manera, el navegador es capaz de representar el estado final de la transición correctamente.
Ivan.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-07 22:55:13
En thins link puede encontrar la solución para el error de Mozilla.
Necesitas agregar 1 regla CSS:
-moz-backface-visibility: hidden;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-17 22:43:25
Sugiero usar jQuery para manejar su opacidad en lugar de usar los atributos CSS3 porque tiene razón en que su ancho máximo está interfiriendo, infelizmente, con sus transiciones.
$(".gallery-icon img").hover(function(){
$(this).fadeTo(fast, 0.7);
}, function(){
$(this).fadeTo(fast, 1.0);
});
El uso de jQuery solucionará muchos de estos pequeños problemas técnicos con las transiciones y se asegurará de que su cambio de opacidad se realice de forma compatible entre navegadores (sí, sé que hay muchas etiquetas para las transiciones para los navegadores, pero no hay atributos para todos los navegadores.) :) Espero que ayude!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-24 20:21:15