6

CSS3 -webkit-transitionは、複数のボックスシャドウ値とテキストシャドウ値を窒息させています。（Chrome＆Safari）

具体的には、2つのシナリオがあります...

  1. 私のテキストには、3つのテキストシャドウ（奥行きのある外観）を持つドキュメント見出しがあります。また、-webkit-transitionルールを使用して、ホバー時にテキストシャドウの色を変更し、ホバー時に光るように見せています。

  2. 上記と同じようにボックスシャドウルールを使用しているリンクがあり、深度効果には3つの値があります。また、ここで-webkit-transitionを使用して、ホバー効果のボタンとテキストの色を変更します。

問題：上記の両方のインスタンスで、要素にカーソルを合わせると、Webkitはトランジションを一度に1つずつレンダリングするように見えるため、値がすべて同時に新しい値にフェードインするわけではありません。代わりに、それぞれがレンダリングされるときに表示されます-次々に、そしてあなたが見るようにそれは非常に厄介な移行です。

私はいくつかのインスタンスを持っています、そしてここにそれらのいくつかへのリンクがあります:(必ずChromeまたはSafariで表示してください）

-ページh1の：hoverでのテキストシャドウ遷移（「GIFTof HEALING」テキスト）：http ：//cure.org/goh

-最初のスライド呼び出しのアクションの：hoverでのボックスシャドウ遷移（[続きを読む]ボタン）：http ：//cure.org

-フッターナビゲーションリンク（About、Rodsなど）の：hoverでのボックスシャドウ遷移：http：//tuscaroratackle.com

最後に、私が使用しているコードのサンプルを示します:(どのサイトからも作成したものではなく、この質問のために作成した例です。ここでライブを参照してください：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>

したがって、ここでの質問は、CSSで異なる構文を使用するなど、順序付けられたレンダリングを防ぐ方法はありますか？（複数のbox-shadow値の特定の順序、またはすべてを1つのルールに追加する代わりに複数のbox-shadow宣言を使用するなど）

2011年5月9日更新：バグがWebkitに報告されました（以下のHusarのコメントを参照）。また、Chromeの最近のビルド（具体的には現在の10.0.648.205バージョン）がスムーズな移行をレンダリングし、バグを効果的に排除していることがわかります。ただし、Safari（バージョン5.0.5（6533.21.1））では、バグのあるレンダリングが引き続き表示されます。

4

3 に答える 3

2

どうやらこれはWebkitレンダリングの単なるバグであり、明らかな修正はありません。

于 2011-04-28T12:48:50.363 に答える
1

また、たとえばjQueryを使用してテキストを単純にフェードインまたはフェードアウトすると、WebKitが「一時的な中断」を起こすことにも気づきました。だから基本的に、私は手足に出かけて、あなたの特定のスタイルはそれとは何の関係もないと思います。私は完全に間違っている可能性があります。取引が何であるかを知ったら、私もこの煩わしさに1、2回遭遇したので、解決策を聞いてみたいと思います。

于 2010-12-31T05:19:25.850 に答える
0

これは、ホバリングイベントのレンダリングでこの問題を修正するのに役立つ可能性があります

                -webkit-transform: translateZ(0px);
                -moz-transform: translateZ(0px);
于 2014-03-07T15:57:25.037 に答える