Artefatti su CSS rendering box-shadow su Safari 6.0.2 sul leone di montagna

Question

Sto avendo alcuni artefatti su Safari 6.0.2 su Mountain Lion sul mio Macbook Pro, usando qualsiasi altro browser tutto renderà come dovrebbe. Ma curiosamente usando Safari sul mio iMac con OSX Lion non riesco a riprodurre il problema. Versione OS diversa, GPU diversa, bug? o sto facendo qualcosa di sbagliato?

Riproduzione: http://jsfiddle.net/gt2g4/ e http://jsfiddle.net/T966K/1/

CSS:

#test{ 

    width: 150px; 
    height: 150px; 

    border-radius: 50%; 

    background-color: blue; 
    box-shadow: inset 0px 3px 0px yellow, 
       inset 0px -3px 0px darkred, 
       -3px -4px -0px blue; 
} 

Informazioni su questo Mac:

MacBook Pro 13 pollici, Metà 2012.

012.
• Grafica Intel HD Graphics 4000 384 MB.

• Software OS X 10.8.2 (12C60).

• Safari versione 6.0.2 (8536.26.17)

Answer 1

Questi manufatti sono ormai inesistenti come di OS X 10.8.3 aggiornamento combo che Apple ha spinto 14 marzo 2013.

Answer 2

Aggiornamento:

su una versione precedente di Windows Safari ho potuto replicare l'errore. Tuttavia, con l'ultima versione per Windows non ho potuto usarlo. Come ho affermato, su Windows quando ho usato l'estensione webkit è sparito.

Ma Apple odia gli utenti Windows; quindi non posso testarlo su nessuna altra versione di questo.

Può benissimo essere un bug nel modo in cui Safari Browser sta leggendo e implementando il codice; è cambiato di recente? Oppure possono esserci alcuni sistemi operativi distintivi, anche hardware.

Prova ad aggiornare il driver della scheda grafica direttamente da ATI o Nvidia. Strano davvero.

---

Per la migliore compatibilità Safari; potresti voler usare l'estensione -webkit. Potete trovare ulteriori dettagli here:

Un esempio si dovrebbe provare sarebbe questo:

-webkit-box-shadow: inset 0 3px 0 yellow, 
        inset 0 -3px 0 darkred, 
        -3px -4px 0 blue; 

per massimizzare la compatibilità Io uso;

• -moz per Mozilla Firefox.
• -webkit per Safari e Chrome.
• -o per Opera.

Quindi normalmente foglio di stile CSS. Certo aggiunge un po 'di codice aggiuntivo, ma tende a massimizzare la compatibilità.Speriamo che questo aiuti. Ho riprodotto il tuo problema con Safari su Windows; ma con -webkit è sparito.

Ma come detto sopra; alcuni software o hardware potrebbero causare l'artefatto. Può verificarsi con hardware overcloccato. Spero che questo aiuti però.