Problèmes / artefacts de rendu Safari 6 (sur Mountain Lion)

Mise à jour finale Je viens de recevoir un e-mail d'Apple confirmant que ce bug a été corrigé dans OS X Mountain Lion 10.8.3

J'ai eu des problèmes de rendu avec Safari 6 sur différents systèmes exécutant tous Mountain Lion, et je ne trouve pas de solution. J'ai joint quelques captures d'écran pour décrire le problème.

Mise à jour Une enquête plus approfondie suggère que cela pourrait être un problème avec les modèles Mac 2012 uniquement, en particulier ceux avec des graphiques HD4000.

Mise à jour Il semble que les artefacts n'apparaissent pas toujours immédiatement, nécessitant des rechargements et / ou des onglets de fermeture / réouverture avant qu'ils n'apparaissent.

Mise à jour Le problème est confirmé comme n'étant pas un bogue WebKit et a été classé comme bogue chez Apple (problème 12750455 par Simon Fraser).

Site Web Twitter Bootstrap sur Safari

Site Web Twitter Bootstrap sur Firefox

Jsfiddle de Teak sur Safari

Jsfiddle de Teak sur Firefox

Liens vers les sites Web indiqués sur les captures d'écran:

• Twitter Bootstrap
• Jsfiddle de teck

C'était un bug dans Safari, résolu dans la mise à jour OSX 10.8.3!

Je peux confirmer que c'est un bug avec le GPU Intel Graphics 4000. Je vois les artefacts graphiques sur mon 13 "Retina MacBook Pro et non sur mon ancien MBP qui a Mt. Lion et un GPU Nvidia Geforce.

J'ai une expérience directe de ce problème en essayant de développer des boutons CSS pour les sites Web ...

Je crois que les artefacts peuvent être reproduits en utilisant le css3 border-radiusen conjonction avec a box-shadow. Bien sûr, cela se produit également dans de nombreuses autres circonstances. (Ce que je peux confirmer)

Voici un lien vers un rapport de bug sur le site web webkit (bien que je ne sois pas sûr qu'il y appartienne):

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

Et la question SO d'où cela venait:

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

Ce n'est pas un bogue Intel HD 4000. Je ne peux voir ce bug que depuis Safari sur Intel HD 4000. Si j'ouvre une page avec (Opera, Chrome, Firefox) - je ne peux pas reproduire ce bug

Une solution rapide à ce problème consiste à utiliser une transformation sur l'objet dont le rayon de bordure ou d'autres dommages provoquent des dommages. De cette façon, vous forcez un redessin avec la carte graphique, et cela résout le problème.

Appliquez la propriété suivante: -webkit-transform: translate3d(0,0,0);- Et ça devrait aller.

Voici des choses que je ferais si vous ne pouvez pas fournir un lien vers quelque chose qui est en direct sur Internet pour que d'autres puissent reproduire / discuter de ce qui se passe.

1. Essayez une version webkit tous les soirs pour voir s'il s'agit d'un bug corrigé, mais pas de livraison. http://nightly.webkit.org

2. Supprimez toutes les extensions de Safari pour être sûr qu'elles ne sont pas causées par une seule.

Je peux également confirmer ce bug sur le macbook Retina 15 "(OSX 10.8.2, Safari 6.0.2)

Mon macbook a également Intel HD4000, mais aussi Nvidia GT 650M pour l'affichage externe.

Pour éliminer toutes les autres possibilités, mais la carte graphique (pilote), j'ai utilisé un adaptateur Thunderbolt vers DVI pour connecter un écran externe sur la carte Nvidia.

Résultat: pas de lignes étranges et d'effets jquery bizarres!

conclusion: problème HD4000 (pilote).