Imagem de plano de fundo do anexo fixo que cintila / desaparece no chrome quando acoplada a uma transformação css

Atualmente estou fazendo um tema de site parallax. As imagens de fundo precisam ser anexadas como fixas para certas seções ‘div’ e ‘section’ para evitar jquery entregando-se a tudo. O problema era que as imagens de fundo das tags abaixo de qualquer item animado desapareciam enquanto a transformação estava sendo feita, apenas no Google Chrome. Remédio?

Este tem sido um mistério não solucionado muito comum. Recentemente eu tive o mesmo problema, e ‘-webkit-backface-visibility: hidden’, provou ser menos do que inútil (no meu plano de fundo fixo ‘fixo’), uma vez que o fundo desapareceu quando foi definido. ( Informações adicionais: o motivo é que quando o plano de fundo é definido como fixo, é quase semelhante a colocar um ‘div’ fixo em segundo plano e definir o plano de fundo div original como transparente. O backface oculto faz o óbvio ).

Para resolver o problema atual, tente definir a propriedade ‘ position ‘ do elemento como ‘ static ‘, ou se você tiver dado algum outro valor, ‘ relative ‘, ‘ fixed ‘ ou ‘ absolute ‘, apenas remova-os.

Se você não se lembra de definir a propriedade position, e o problema ainda persistir, minha sugestão é que você use uma ferramenta de debugging no chrome ou firefox, para

Certifique-se de que não haja valores definidos manualmente para a propriedade ‘position’ diferente de ‘static’.

Só passei meia hora pesquisando … Pensei que isso poderia tornar mais fácil para você … cumprimentos. 🙂

Mesmo problema aqui. Eu tinha um header pegajoso usando a position:fixed; que brilhou no PC Chrome 34. Eu tentei as soluções neste segmento, position:static; no pai quebrou outras partes. Mas eu sei adicionando -webkit-transform: translate3d(0,0,0); basicamente faz o Chrome transformar esse HTML em uma camada para que ele não seja repintado. Isso funcionou para mim.

 element { position:fixed; top:0; left:50%; width:960px; height:50px; margin-left:-480px; -webkit-transform: translate3d(0,0,0); /* ...all other CSS... */ } 

ATUALIZAR
Uma resposta futura é usar a propriedade de will-change para criar uma camada!
Especificações W3
Eu posso usar
Definição MDN

 element { position:fixed; top:0; left:50%; width:960px; height:50px; margin-left:-480px; will-change:top; /* ...all other CSS... */ } 

E eu vou ser honesto, isso parece uma solução estranha para consertar a cintilação, mas em essência torna o elemento uma camada, o mesmo que translate3d ().

Talvez um pouco tarde para responder, mas parece que o bug vem com o anexo de fundo: propriedade fixa no chrome. Eu encontrei uma solução mudando seu valor para “rolar”. Isso causará um efeito de jitterin no firefox, mas você pode evitá-lo usando uma consulta de navegador de mídia no seu CSS, algo assim:

 .yourstellarlayer{ background-attachment: fixed; } /*only for webkit browsers*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourstellarlayer{ background-attachment: scroll; } } 

Espero que ajude!

Eu estava tendo o mesmo problema com o Chrome, parece ser um bug que ocorre quando há muita coisa acontecendo dentro da página, eu consegui corrigi-lo adicionando o seguinte código de transformação ao elemento de posição fixa, ( transform: translateZ(0);-webkit-transform: translateZ(0); ) que força o navegador a usar aceleração de hardware para acessar a unidade de processamento gráfico (GPU) do dispositivo para fazer com que os pixels voem. Aplicativos da Web, por outro lado, são executados no contexto do navegador, o que permite que o software faça a maioria (se não todos) da renderização, resultando em menos potência para as transições. Mas a Web está se recuperando e a maioria dos fornecedores de navegadores agora fornece aceleração gráfica de hardware por meio de regras específicas de CSS.

Usando -webkit-transform: translate3d (0,0,0); vai chutar a GPU em ação para as transições CSS, tornando-as mais suaves (FPS mais altos).

Nota: translate3d (0,0,0) não faz nada em termos do que você vê. Move o object por 0px no eixo x, yez. É apenas uma técnica para forçar a aceleração de hardware.

 #element { position: fixed; /* MAGIC HAPPENS HERE */ transform: translateZ(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/ } 

Para mim, o problema era que os estilos eram anexados aos elementos pai do div que tem o plano de fundo fixo, eu coloco -webkit-backface-visibility: inherit; para os dois pais principais da minha div fixa.

no meu caso eu estava usando a base off-canvas por isso é assim

 .off-canvas-wrap{ -webkit-backface-visibility:inherit; } .inner-wrap{ -webkit-backface-visibility:inherit; } 

Isso realmente me incomodou e quase arruinou a minha noite. Minha correção é definir

 background-attachment: scroll; 

Trabalhou no meu projeto.
Antes disso, eu tinha em fixo. Espero que isto ajude.

Nós tivemos um problema semelhante com uma position: fixed; elemento. Este elemento continha um recipiente relativamente posicionado, contendo uma imagem absolutamente posicionada. Na transição do CSS a imagem desapareceu, quando a transição foi feita é reaparecida.

Nós tentamos resolver o problema definindo o -webkit-backface-visibility para hidden em vários elementos, incluindo o elemento body, mas isso não ajudou. Com a ajuda deste tópico, usamos o inspetor de web do Chrome para mexer nas propriedades de position dos elments e, por sorte, conseguimos resolver o problema sem ter que alterar muito o site. (tudo o que tínhamos que fazer era alterar a posição do pai do elemento fixo para static )

Aqui está uma solução que funciona (2014.7.11) no firefox 30.0, chrome 35.0, opera 22.0, ou seja, 11.0:

PASSO 1: adicione estas linhas no .htaccess :

 # cache for images  Header set Cache-Control "max-age=10000, public"  

PASSO 2: adicione o pré-carregamento de imagens, por exemplo :

 var pics = []; // CREATE PICS ARRAY $(document).ready(function(){ ... preload( '/public/images/stars.red.1.star.png', '/public/images/stars.red.2.star.png', '/public/images/stars.red.3.star.png', '/public/images/stars.red.4.star.png', '/public/images/stars.red.5.star.png', '/public/images/stars.empty.png' ); ... $('.rating').on('mousemove', function(event){ var x = event.pageX - this.offsetLeft; var id = getIdByCoord(x); // if ($(this).data('current-image') != id) { $(this).css('background-image', 'url(' + pics[id].src + ')'); $(this).data('current-image', id); } }) ... }) ... // PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT function preload() { for (i = 0; i < arguments.length; i++) { pics[i] = new Image(); pics[i].src = arguments[i]; // alert("preload " + arguments[i]); } } 

PS obrigado Shawn Altman

Minha tarefa era criar uma página com um efeito de paralaxe. Depois de tentar consertar isso por meio do CSS, encontrei a seguinte solução.

JavaScript:

 var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; if (isChrome) { var itemArr = $('.slider-title'); $(window).scroll(function() { var pos = $(window).scrollTop(); var wh = window.innerHeight; $(itemArr).each(function(i, item){ var p = $(item).position(); var h = $(item).height(); if (p.top + h > pos && p.top < pos+wh) { // items ir redzams var prc = (p.top - pos +h)/wh ; //console.log(prc); $(item).css({'background-position':'center '+prc+'%'}); } }); }); } 

CSS:

  /*only for webkit browsers*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .slider-title{ background-size:auto; background-position: center 0%; } } 

.slider-title seria o item com anexo de plano de fundo fixo.

Então, estou no Chrome versão 40 e continuo vendo esse problema. A solução que está trabalhando para mim no momento é criar uma posição de configuração de div interna relativa a essa div e fazer com que ela se ajuste à altura de seu pai e ao definir o plano de fundo na div pai com um anexo de plano de fundo fixo:

 
// Code goes here including absolute posiioned elements

O problema parece ocorrer quando você tem um parente de posição e anexo de plano de fundo fixo no mesmo elemento no meu caso.

Espero que isto ajude.

Eu também tive os mesmos problemas no Chrome

é muito simples, não é necessário adicionar nenhum webkit e tag de mídia, basta seguir as etapas abaixo

1. em vez de fundo: url (‘caminho-para-imagem’) definir a imagem como abaixo e definir a posição como fixo

2. funcionará no chrome assim como no navegador IE

Este é tarde para a festa, mas uma descoberta surpreendente, como eu posso ver principalmente usuários de framework css, Bootstrap, Foundation (outros), tem problemas, e tenho certeza que muitos de vocês também têm rolagem para funções js superiores que mostram rolar para o botão superior quando o usuário começar a rolar para baixo,

se você tem algo parecido com isto (o Bootstrap o embutiu)

 .fade { opacity: 0; -webkit-transition: opacity .35s linear; -o-transition: opacity .35s linear; transition: opacity .35s linear; } .fade.in { opacity: 1; } 

ou você está mostrando algum elemento via,

 -webkit-transition: opacity .35s linear; -o-transition: opacity .35s linear; transition: opacity .35s linear; 

ou você está adicionando qualquer tipo de elemento ou class de elemento com transição, em rolagem para baixo, via js (animation.css, waypoints.js, velocity.js)
remova a transição / class, se possível, desse elemento ou verifique novamente quando esse elemento aparecer para corrigir o problema do Chrome instável.

Adicione a propriedade transform ao seu elemento com imagem de fundo fixa. Você pode ter qualquer posição definida.

 #thediv { width: 100%; height: 600px; position: relative; display: block; background-image: url(http://sofpt.miximages.com/background/hockeyjacket1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; border: 10px solid black; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } 

https://jsfiddle.net/rkwpxh0n/2/

Eu tive esse problema em overlay div abaixo da janela pop-up (desaparecendo aleatoriamente na ópera 20) – ambos animados e ativados pelo script.

 

 .popupwrapper { display: none; z-index: 9100; } .popupwrapper.active { display: block; } .popupwrapper > div { -webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out; -moz-transition: opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out; -ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; } .popupoverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(26,26,26,.9); opacity: 0; } .popup { position: fixed; top: 30%; left: 40%; padding: 48px; background: #e6e6e6; z-index: 9101; -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } .popupoverlay.active { opacity: 1; } .popup.active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 

Sobreposição foi posicionada absolutamente (.popupoverlay), mas no recipiente que não foi posicionado de alguma forma. Eu copiei o posicionamento absoluto da sobreposição para pai (.popup) e funciona bem.

 .popupwrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9100; } 

Eu acho que o problema aparece apenas quando o posicionamento dos elementos pai não é óbvio.

Fico feliz se ajudou alguém. Saudações

Parece haver um erro no Chrome no momento em que você adiciona qualquer marcação no elemento. Tente remover o fundo desse elemento e dê uma posição: relativo. Dentro do elemento, adicione um novo div com as dimensões necessárias e adicione o plano de fundo, apenas não adicione nenhuma marcação dentro dele.

Exemplo:

Atual:

 

Corrigido:

  

Espero que ajude!

Outra solução alternativa, se você deve ter posição: fixo / relativo / absoluto, talvez porque você tem um elemento absolutamente posicionado dentro (como era o meu caso) é criar um div de invólucro dentro da div piscante e mover a posição e a propriedade background para isso.

por exemplo

você tinha –

 

Solução alternativa possível

 

Eu não tenho mais o flicker, aparentemente o bug flicker não desce para os containers filhos.

Intereting Posts