Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Estou trabalhando com um novo projeto e uma das páginas internas possui efeito de mix-blend-mode, para que a imagem tenha um efeito com a cor do background em seu elemento pai, como efeitos de layers no Photoshop ou Sketch. Porém este elemento possui algumas div’s com transition de opacidade.

A soma de todas estas características, porém, faz com que o Chrome apresente um bug: esconde um elemento que possui position: fixed (no caso o topo fixo do WordPress, quando logado).

Perdi algumas horas até encontrar a solução que envolve a aplicação da propriedade will-change: opacity no elemento pai, eliminando o bug que envolve o uso de opacity, transition e mix-blend-mode.

É um bug um tanto quanto antigo, já podia ter sido corrigido né?