ti-enxame.com

Muito difícil de resolver e estranho problema de transição de opacidade do CSS3 (... deve ser um bug?)

Estou absolutamente arrancando todo o meu cabelo com esse problema CSS muito frustrante e estranho que estou tendo.

Estou usando o Bones clichê para criar um site, e tem sido ótimo, até agora ...

Ele usa o sistema de grade de fluidos e recentemente tentei criar uma galeria simples que criei em uma grade (4 imagens, cada uma envolvida em uma coluna de um quarto, com a primeira/última aula adicionada à primeira/última imagem).

Se você passar o mouse sobre as imagens (especialmente nas três primeiras por algum motivo), notará que elas mudam a largura em um pixel ou dois por algum motivo maluco. As imagens estão definidas para max-width:100%, e tenho a sensação de que esse é o culpado, porque se você der às imagens uma largura "fixa" (exemplo .gallery-icon img {max-width:165px;}, corrige o problema, mas sendo um sistema de grade fluida, não posso seguir esse caminho, pois as imagens ficam 165px ao redimensionar o navegador e mesmo se eu definir 4 larguras diferentes, dependendo da mídia, entre os tamanhos de mídia , as imagens não se alinharam corretamente.

Se não fosse pelo problema do efeito transition (se eu desativar o transition, as imagens diminuem opacity, mas não há animação), funcionaria como eu queria para funcionar :(

Por favor, ajudem pessoal!

Aqui está um site de demonstração vazio, com o clichê de ossos em execução e nada mais do que a galeria na página. Deixe-me saber se você vê a questão tremendo.

(Não consegui recriá-lo no jsfiddle, instalei-o em um domínio antigo que eu tinha por aí hehe)

EDIT: Acabei de notar que o problema parece acontecer com imagens que são maiores que a div em largura e altura. As imagens 1 + 3 são essas e apresentam o erro, enquanto as imagens 2,4 parecem estar bem? e as imagens 2 + 4 têm uma altura menor que a div ..... Mas mesmo se eu definir as imagens como uma altura máxima, o problema continua ..

EDIT2: Adicionado um vídeo rápido para mostrar o problema (Firefox e Chrome mais recentes) http://www.youtube.com/watch?v=uL81hLfMvvw

39
user1202292

Eu diria que é realmente um bug no Chrome (estou usando 24.0.1312.57 m)).

O problema não está realmente nas imagens 1 + 3, eu já vi na imagem número 2.

Penso que o problema surge quando a largura da imagem é uma fração (digamos 146.71 px). Na exibição estacionária, isso é arredondado para 146 px. Na transição, isso é arredondado para cima (mais corretamente!) Para 147 px.

15
vals

Obrigado aos vals por apontando o aspecto da GP ... Isso me lembrou este trecho de CSS que tende a resolver Chrome problemas de renderização:

-webkit-transform: translateZ(0);

Eu apliquei isso no contêiner (div.post) que contém o item problemático (i.icon-) que tem uma largura de fração, problema resolvido!

Crédito: Eu tenho esta solução de this answer para corrigir elementos incorretamente renderizados (fixos) depois de navegar para uma âncora de página.

100
2called-chaos

use a seguinte dica de css para promover o elemento afetado para uma nova camada composta (ele resolveu o mesmo problema exato para mim):

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

Isso indica o compositor para isolar o processo de pintura do elemento em uma nova camada composta. Ao inspecionar camadas nas ferramentas de desenvolvimento chrome dev, você pode garantir que o elemento foi promovido e, portanto, o problema foi resolvido. O elemento aparecerá em uma nova camada com os seguintes 'motivos de composição: tem um ativo animação ou transição acelerada. Tem uma dica de composição que mudará de vontade. "

Parece que, depois de promover o elemento para uma nova camada dessa maneira, o navegador pode renderizar o estado final da transição corretamente.

Ivan.

12
isaldarriaga

Neste link você pode encontrar uma solução para o bug Mozilla.

Você precisa adicionar 1 regra CSS:

-moz-backface-visibility: hidden;
4
Mr Br

Sugiro usar o jQuery para lidar com a sua opacidade, em vez de usar os atributos CSS3, porque você está certo, pois sua largura máxima está mexendo, infelizmente, com suas transições.

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

O uso do jQuery corrigirá muitas dessas pequenas falhas nas transições e garantirá que sua alteração de opacidade seja feita entre navegadores (sim, eu sei que existem muitas tags para transições para navegadores, mas não existem atributos para todos os navegadores .) :) Espero que ajude!

1
Tammy Shipps