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

12

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:

macos safari graphics

— René
source

2

J'ai essayé de modifier un peu le texte, mais avant d'essayer de suggérer si un autre site serait mieux et de le migrer, pouvez-vous clarifier ce que vous recherchez principalement? Voulez-vous que cela concerne JQuery nécessitant un correctif ou WebKit / Safari? Nous nous concentrons davantage sur les utilisateurs ici et bien que certains soient des programmeurs et des développeurs Web, nous ne sommes pas le meilleur endroit pour la connaissance du niveau de code et du niveau de bogue / régression. Nous pouvons vous indiquer comment déposer un bogue auprès d'Apple, mais nous n'avons généralement pas de questions / réponses html / css / js détaillées ici.

— bmike

1

Je vais parfaitement bien ... imgur.com/a/vICCs J'exécute Safari 6.0.1 sur OS X Lion 10.7.5

— daviesgeek

@bmike Je suppose que c'est un problème Mountain Lion, et non un problème html / css / js.

— René

Je viens de demander à un collègue qui dirige également Mountain Lion: aucun problème. La source du problème reste donc un mystère pour moi.

— René

1

@ René Selon blackpixel.com/blog/2012/02/radar-or-gtfo.html c'est une bonne idée de soulever des bogues en double avec Apple, donc c'est probablement une bonne idée si vous le signalez aussi!

— Olly Hodgson

3

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

— Guido Hendriks
source

1

L'ajout de la citation pertinente des notes de mise à jour, par exemple, augmenterait considérablement la valeur de votre réponse.

— Thecafremo

1

Ce n'était pas réellement noté dans les notes de mise à jour, mais cela l'a résolu. Je l'ai essayé moi-même avant et après la mise à jour.

— Guido Hendriks

1

Il semble que cela ait été corrigé par Apple avec la sortie de Mountain Lion 10.8.3 + Safari 6.0.3 cette semaine.

— Sinklar

8

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

— Teck
source

1

Merci d'avoir partagé cela. Je ne suis pas convaincu que ce soit un problème de kit Web, car ce problème est spécifique à OS X Mountain Lion et uniquement avec les graphiques HD4000.

— René

2

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

— Vladimir Kadnikov
source

2

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.

— Kalms
source

A un coût de performance non négligeable si vous l'appliquez à une div contenant beaucoup de choses, mais contourne le bogue.

— James

Coût de performance? J'aimerais voir quelques données à ce sujet. Tout coût supplémentaire doit être pris en charge par le GPU.

— Kalms

1

Une transformation nulle crée une texture de support pour cet élément sur le GPU. Cela rend le déplacement de l'élément bon marché car il s'agit d'un composite plutôt que d'une peinture, mais cela rend les modifications de l'élément plus coûteuses (par exemple, texte, dimension, changements de style) car il doit télécharger une nouvelle texture sur le GPU ainsi que repeindre l'élément . Vous utilisez également la mémoire GPU, ce qui peut être un problème sur les téléphones.

— JaffaTheCake

Merci pour ça. Avez-vous de bonnes recommandations pour des informations à ce sujet?

— Kalms

1

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.

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
Supprimez toutes les extensions de Safari pour être sûr qu'elles ne sont pas causées par une seule.

— bmike
source

J'ai ajouté des liens vers les sites Web indiqués sur les captures d'écran.

— René

J'ai essayé vos deux suggestions mais malheureusement elles n'ont pas fonctionné.

— René

1

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).

— Ruben
source