Problemas de renderização / artefatos do Safari 6 (no Mountain Lion)

12

Atualização final Acabei de receber um e-mail da Apple confirmando que esse bug foi corrigido no OS X Mountain Lion 10.8.3

Estou tendo problemas de renderização com o Safari 6 em diferentes sistemas, todos executando o Mountain Lion, e não consigo encontrar uma solução. Anexei algumas capturas de tela para descrever o problema.

Atualização Uma investigação mais aprofundada sugere que isso pode ser um problema apenas nos modelos Mac de 2012, especificamente nos gráficos HD4000.

Atualizar Parece que os artefatos nem sempre são exibidos imediatamente, exigindo algumas recargas e / ou guias de fechamento / reabertura antes de aparecerem.

Atualização O problema foi confirmado como não um bug do WebKit e foi arquivado na Apple (problema 12750455 por Simon Fraser).

Site do Twitter Bootstrap no Safari

Site do Twitter Bootstrap no Safari

Site do Twitter Bootstrap no Firefox

Site do Twitter Bootstrap no Firefox

Jsfiddle de teca no Safari

Jsfiddle de teca no Safari

O jsfiddle da teca no Firefox

O jsfiddle da teca no Firefox

Links para os sites mostrados nas capturas de tela:

macos safari graphics René
fonte
2
Tentei editar um pouco o texto, mas antes de tentar sugerir se outro site seria melhor e migrá-lo, você pode esclarecer o que está procurando principalmente? Deseja que o JQuery precise de um patch ou o WebKit / Safari? Aqui estamos mais focados nos usuários e, embora alguns sejam programadores e desenvolvedores da Web, não somos o melhor lugar para conhecimento de nível de código e nível de erro / regressão. Podemos indicar como registrar um bug na Apple, mas geralmente não há perguntas e respostas detalhadas em html / css / js aqui.
bmike
1
Estou perfeitamente bem ... imgur.com/a/vICCs Estou executando o Safari 6.0.1 no OS X Lion
10.7.5
@bmike Meu palpite é que este é um problema do Mountain Lion, e não um problema de html / css / js.
René
Acabei de perguntar a um colega que também dirige o Mountain Lion: não há problemas por lá. Portanto, a fonte do problema permanece um mistério para mim.
René
1
@ René De acordo com blackpixel.com/blog/2012/02/radar-or-gtfo.html , é uma boa ideia gerar bugs duplicados com a Apple; portanto, provavelmente é uma boa ideia se você denunciar também!
Olly Hodgson

Respostas:

3

Foi um bug no Safari, resolvido na atualização 10.8.3 do OSX!

Guido Hendriks
fonte
1
Adicionar a citação relevante das notas de atualização, por exemplo, aumentaria muito o valor da sua resposta.
Thecafremo
1
Na verdade, não foi anotado nas notas de atualização, mas resolveu. Tentei-me antes e depois da atualização.
Guido Hendriks 15/03
1
Parece que foi corrigido pela Apple com o lançamento do Mountain Lion 10.8.3 + Safari 6.0.3 esta semana.
Sinklar
8

Posso confirmar que esse é um erro da GPU Intel Graphics 4000. Eu vejo os artefatos gráficos no meu MacBook Pro Retina de 13 "e não no meu MBP mais antigo, que possui o Mt. Lion e uma GPU Nvidia Geforce.

Tenho experiência em primeira mão com esse problema ao tentar desenvolver botões css para sites ...

Eu acredito que os artefatos podem ser reproduzidos usando o css3 border-radiusem conjunto com a box-shadow. Embora obviamente isso também ocorra em muitas outras circunstâncias. (O que posso confirmar)

Aqui está um link para um relatório de bug no site do webkit (embora não tenha certeza de que ele pertença a ele):

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

E a pergunta SO veio:

/programming/13505314/artifacts-on-css-rendering-box-shadow-on-safari-6-0-2-on-mountain-lion

Teca
fonte
1
Obrigado por compartilhar isso. No entanto, não estou convencido de que seja um problema com o kit da web, pois esse problema é específico do OS X Mountain Lion e apenas com gráficos HD4000.
René
2

Este não é o bug do Intel HD 4000. Só vejo esse bug no Safari no Intel HD 4000. Se abrir a página com (Opera, Chrome, Firefox) - não consigo reproduzir esse bug

Vladimir Kadnikov
fonte
2

Uma solução rápida para esse problema é usar uma transformação no objeto com o raio da borda ou outros danos que causem propriedades. Dessa forma, você está forçando um redesenho com a placa de vídeo e isso elimina o problema.

Aplique a seguinte propriedade: -webkit-transform: translate3d(0,0,0);- E você deve ficar bem.

Kalms
fonte
Tem um custo de desempenho não insignificante se você o aplicar a uma div que contém muitas coisas, mas a solução alternativa é o bug.
James
Custo de desempenho? Eu gostaria de ver alguns dados sobre isso. Qualquer custo adicional deve ser tratado pela GPU.
Kalms
1
Uma transformação nula cria uma textura de suporte para esse elemento na GPU. Isso torna mais barato mover o elemento, pois é um composto e não uma pintura, mas torna as alterações no elemento mais caras (por exemplo, texto, dimensão, alterações de estilo), pois ele precisa carregar uma nova textura na GPU e repintar o elemento . Você também ocupa a memória da GPU, o que pode ser um problema nos telefones.
JaffaTheCake
Obrigado por isso. Alguma boa recomendação para obter informações sobre isso?
Kalms
1

Aqui estão algumas coisas que eu faria se você não puder fornecer um link para algo que está ativo na Internet para que outras pessoas dupliquem / desconsiderem o que está acontecendo.

  1. Experimente uma compilação noturna do webkit para ver se é um bug corrigido, mas não o envio. http://nightly.webkit.org

  2. Remova todas as extensões do Safari para garantir que não seja causada por uma.

bmike
fonte
Adicionei links para os sites mostrados nas capturas de tela.
René
Tentei as duas sugestões, mas infelizmente elas não funcionaram.
René
1

Também posso confirmar este erro no macbook retina 15 "(osx 10.8.2, safari 6.0.2)

Meu macbook também possui Intel HD4000, mas também Nvidia GT 650M para a tela externa.

Para eliminar todas as outras possibilidades, exceto a placa gráfica (driver), usei um adaptador Thunderbolt para DVI para conectar um monitor externo à placa Nvidia.

Resultado: sem linhas estranhas e efeitos jquery esquisitos!

conclusão: problema HD4000 (driver).

Ruben
fonte