Scroll Lag com a propriedade CSS3 box-shadow?

Question

Eu adicionei uma box-shadow para uma seção de uma página recentemente para dar-lhe o mesmo efeito de borda sombra que é visto em aplicativos Mac OS X. Parecia ótimo, mas eu notei que a rolagem para cima e para baixo na página tornou lag. Eu normalmente só vê isso em páginas que têm imagens de fundo chato e toneladas de imagens e vídeos incorporados rebocadas todo ( tosse MySpace tosse ). Eu originalmente decidiu usar caixa-sombra desde que eu descobri que iria eliminar a necessidade de usar uma imagem, o que eliminaria qualquer possibilidade de atraso de rolagem.

Eu sei que CSS3 ainda é novo, mas é esta a razão para o atraso? É o software que está sendo sombra prestados ou algo assim? Quando eu aplicar a sombra caixa para elementos menores, não lag em tudo. Eu só estou querendo saber se alguém tem experimentado isso.

Eu apenas tentei isso na primeira página Stack Overflow, na div #content usando Firebug com uma configuração de:

-moz-box-shadow: 1px 1px 10px;

E eu notei alguns rolagem ficar para depois. Eu estou usando o Firefox 3.5.

A minha pergunta é, quais são algumas alternativas para usar este atributo se eu quiser adicionar uma borda estilo Mac OS X para uma seção da minha página?

Em uma nota lateral, Alguém sabe se é possível aplicar a sombra caixa apenas para a parte superior, esquerda e direito lados do elemento e não o fundo? Tentei 1px -1px 10px mas ainda mostra a sombra na parte inferior. Se eu continuar diminuindo o segundo offset, que, eventualmente, remove a sombra do fundo, mas depois a sombra superior é agora a maneira mais escura e maior.

E sim, tenho visto os artigos no box-shadow em:

• CSS3 Informações
• de fredericiana blogue

Answer 1

Sua melhor aposta seria usar -moz-border-image . Isso deve resolver ambos os problemas.

por exemplo. você pode usar uma imagem como esta, , Combinado com CSS como este

-moz-border-image: url(shadow.png) 10 / 10px;

para criar a sua sombra. E uma vez que você estiver usando uma imagem, você pode deixar de fora a sombra de fundo, bem como, se quiser.

---

Você não vai ser capaz de remover a sombra do fundo usando -moz-box-shadow; ele não é chamado "sombra caixa" para nada. Aplica-se uma sombra para a caixa inteira. Você não pode especificar uma sombra para cada lado separadamente como com border, dizem. O melhor que você pode fazer é em torno de mexer com a colocação, desfocagem e propagação da sombra. Mas isso leva inevitavelmente a uma sombra mais escura no lado oposto.

Eu recebo o lag caixa de sombra, bem como quando eu experimentá-lo em Stackoverflow. Ela afeta o desempenho no Safari, bem como quando eu tento -webkit-box-shadow, embora não seja tão visível como no Firefox. O desempenho venha a melhorar no futuro, mas eu presumo que a sombra sempre terão alguns de impacto, pois, tanto quanto eu sei que é software prestados.

Answer 2

Isso foi corrigido em webkit como de dois dias atrás. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

Você pode pegar um cromo noite para experimentá-lo.

Eu olhei em FF3.6 e FF4 e não vê terrível desempenho de rolagem lá, por isso pode ser abordado lá também.

Answer 3

O problema ainda persiste no Chrome para Android a partir da data atual. Alguns combos caixa-sombra resultar em um desempenho de rolagem pobres. Na minha caso de empilhamento de dois inserir caixa-sombras (por exemplo, superior / inferior) levar para o problema descrito. A única solução que pode fornecer é fazer com que a caixa-sombras menos complexo e tente novamente ... que funcionou para mim. Isso é insatisfatória, mas sim em vez u também pode usar a solução border-image ou remover a caixa-sombra afetada completamente. Espero que este fica fixo em breve, finalmente. Btw a versão Android do Firefox não tem os problemas mais (para o meu CSS3). Além disso, as versões desktop de ambos os navegadores não são afetados no meu caso.

Answer 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

versão do navegador

Cross para o navegador antigo e novo. img simples: http://i28.tinypic.com/2njzkt1.png

estilo : fixo para imagens demasiado sobrecarregar perfomance navegador