web-dev-qa-db-ja.com

CSS3の色遷移がChrome

このWebサイト の左側のメニューにあるリンクには、CSS3遷移プロパティcolorがあり、マウスをホバーすると変化します。 Chrome 16または17（色の変化が突然））では機能しませんが、Webサイトの他の移行では機能します。Firefox、Opera、およびChromeなどのWebkitを使用するSafariでも機能します。 CSSに問題があるとは思いません。

これがこの部分の私のCSSです（完全なCSSは here です）：

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

UPDATE！どうやらこれはおそらく18ベータで修正されました。ただし、この問題が発生した場合は、以下の承認された回答にリンクされているバグレポートにアクセスして、問題にスターを付けてください。

google-chromecsswebkitcss-transitions
25
Abhranil Das

@にじこくん同じことが確認できます。 ：visitedリンクはChromeでは正しく遷移しません。やったーこれはバージョン16で発生した問題で、修正されなかったようです。 Chromiumサイトでいくつかのバグレポートが公開されています。

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

35
Darren Kovalchik

私は回避策を見つけようとしました（私のブログの詳細： http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug ）

A：visitedを色（color、background、border-colorなど）で透明に宣言すると、回避策として機能するようです。私はまだ十分にテストしていませんが、フィードバックを受け取ってよかったです。

3
Álex Acuña Viera

これは動作しない問題ではありません。つまり、：visitedリンクは移行していません。そのため、クリックしていない場合は機能する可能性がありますが、クリックした場合は機能しません。

私は解決策を知りません、私はまだ解決策を探しています...

2
Nijikokun

。 。これはバグではなく、意図した動作であることに気付くといいと思いました。引用 Mozilla Developer docs ：

Web開発者への影響

全体として、これはWeb開発者にあまり大きな影響を与えません。ただし、サイトの変更が必要になる可能性があるいくつかの特殊なケースがあります。

（...）

CSS遷移は、訪問済みリンクではサポートされません。幸いなことに、CSSの移行は非常に新しいものであり、現時点でそれらを使用しているサイトはほとんどないため、現時点では多くの人に影響を与えることはありません。

2
diego nunes

Darren Kovalchikが彼の助言者（ https://stackoverflow.com/a/8524199/1010777 ）に書いたように、Chromeにはこれに関するバグがあります。

可能な回避策は、リンクの親要素にカラーアニメーションを適用し、リンクの色を継承に設定することです。この場合、リンクが：visitedであってもアニメーションはうまく機能します。

html：

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

css：

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

もちろん、リンクの親の色を設定することが問題である場合、この回避策は機能しませんが、他のすべてのケースでは、簡単でクリーンなソリューションを提供します。

1
Burnee

私のリンク移行のうち2つは機能しますが、残りはChromeでは機能しません。それらはすべて同じ設定を使用します。リンクがmailto：またはcallto：のどちらかである場合に動作するようです-私に尋ねると奇妙に奇妙です。

0
popotan

：visited動作から色を削除すると、期待どおりに動作するはずです。 ：visited動作で色が設定されている場合、：hover color（遷移なし）でも期待どおりに機能しません。

0
rovsen

私はまだ同じ問題に遭遇し、私のために働く解決策を見つけました。

次のように:link疑似クラスを使用することで修正できました。

#menu a, #menu a:link {
  color: gray;
  transition: color 0.5s;
}

#menu a:hover {
  color: black;
}
0
sam

グレーと黒ではなく、＃cccと＃000を使用してみてください。

edit：このように： http://jsfiddle.net/qtzEj/

それが役に立てば幸い:)

0
will