Webkit erstickt an mehr text-shadow & box-shadow Werte mit Webkit-Rendering-Übergang

StackOverflow https://stackoverflow.com/questions/3942971

Frage

CSS3 -webkit-Übergang erstickt auf mehreren box-shadow Werte und text-shadow Werte. (Chrome & Safari)

Genauer gesagt, ich habe zwei Szenarien ...

  1. Ich habe Text ein Dokument Überschrift hat, die drei Textschatten hat (für gewisse optische Tiefe). Ich bin auch die -webkit-Übergangsregel mit der Farbe des Textes-Schattens auf schweben zu ändern, so dass es auf schweben zu leuchten scheint.

  2. Ich habe Links, die ich auf in gleicher Weise der box-shadow Regel bin mit wie oben, mit drei Werten für Tiefenwirkung. Auch unter Verwendung von hier -webkit-Übergang die Farbe der Tasten und Text für einen Hover-Effekt zu ändern.

Das Problem: Für beide Fälle oben, wenn die Elemente schweben über WebKit den Übergang als einer nach dem anderen zu machen scheint, so dass die Werte nicht alle verblassen in ihre neuen Werte gleichzeitig. Stattdessen erscheinen sie als jeder gemacht wird - ein nach dem anderen, und es ist ein sehr unangenehmer Übergang wie Sie sehen

.

Ich habe mehrere Instanzen, und hier sind Links zu einigen von ihnen: ( stellen Sie sicher, Blick in Chrome oder Safari )

-Text-shadow Übergang auf: Hover für Seite h1 ( "Gabe des Heilens" text): http: // Heilung. org / goh

-Box-shadow Übergang auf: Hover für 1. Zug Aufruf zum Handeln ( "Read More" -Button): http: // Heilung. org

-Box-shadow Übergang auf: Hover für Fußzeile nav Links (About, Stäbe usw.): http://tuscaroratackle.com

Schließlich ist hier eine Probe des Codes verwende ich: ( nicht von jeder Website, nur ein Beispiel, das ich für diese Frage gebaut, siehe es lebt hier: http://joelglovier.com/test/webkit-shadow-transition-bug.html ) 

<!DOCTYPE HTML>
<html>

<head>
<style type="text/css">

ul {
    overflow:hidden;
    width:500px;
    height:auto;
    margin:50px 100px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(0,0,0,1);
    -webkit-border-radius:10px;
    -webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
    -webkit-transition:all .5s ease;
}

ul:hover {
    -webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
    display:inline-block;
}
a:link,a:visited {
    float:left;
    display:block;
    padding:6px 10px;
    margin:10px 20px;
    font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
    text-decoration:none;
    color:#000;
    background:#92d400;
    -webkit-border-radius:4px;
    -webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
    -webkit-transition:all .5s ease;
}
a:hover,a:focus {
    background:#198c45;
    -webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff; 
}
a:active {
    position:relative;
    top:1px
}
</style>
</head>

<body>

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
</ul>

</body>
</html>

So die Frage hier wirklich ist es eine Möglichkeit, dass die geordnete Rendering zu verhindern, wie andere Syntax in meinem CSS? (Wie zum Beispiel einer bestimmten Reihenfolge der mehrer box-shadow Werte oder die Verwendung mehrerer box-shadow Erklärungen anstatt sie alle in eine Regel hinzufügen?)

05.09.2011 UPDATE: Der Fehler ist auf Webkit berichtet (siehe Husar Kommentar unten). Auch ich sehe, dass die jüngsten Builds von Chrome (speziell meine aktuellen Version 10.0.648.205) rendert einen smoothe Übergang jetzt, effektiv die Fehler zu beseitigen. Safari jedoch (Version 5.0.5 (6533.21.1)) nach wie vor zeigt das Buggy-Rendering.

War es hilfreich?

Lösung

Offensichtlich ist dies nur ein Bug mit Webkit-Rendering, und es gibt keine offensichtlich fix.

Andere Tipps

Ich habe auch festgestellt, dass bei Verwendung von jQuery zum Beispiel einfach verblassen Text in oder out, WebKit „Schluckauf.“ Also im Grunde, werde ich auf einem Bein gehen und sagen, dass ich glaube nicht, dass Ihre speziellen Arten etwas damit zu tun haben. Ich könnte völlig falsch sein. Wenn Sie herausfinden, was das Geschäft ist, würde ich gerne eine Lösung hören, weil ich auch in diesen Ärger laufen habe ein oder zwei Mal.

Dies könnte helfen, dieses Problem auf Rendering zu beheben Ereignisse für Schweben 

                -webkit-transform: translateZ(0px);
                -moz-transform: translateZ(0px);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top