chromeは、cssのlinear-gradientにdegが使えない?

今日、取引先のサイトをメンテナンスしようとGoogle Chromeで開いたんですが、何かおかしいんですよ。

「?」

よく見ると、h2タグのbackgroundのグリーンのグラデーションの方向が「下から上への縦方向」だったのが、「左から右への横方向」に変わってるじゃないですか。

こうだったものが

正しい方

正しい方

こうなってるんです。

なぜかこうなってた方

なぜかこうなってた方

その時のブラウザはMac版のGoogle Chromeのバージョン 26.0.1410.43(2013-04-06現在最新バージョン)です。

確認の為、Windows版のGoogle Chromeのバージョン 26.0.1410.43 m(2013-04-06現在最新バージョン)で開いても、同様に横グラデーションになっていました。

しかし、Mac版Safariバージョン6.0.3、Sleipnirバージョン4.1.2では、ちゃんと縦グラデーションになるんですよね。(IEについてはIE9.jsなどでドーピングしているので除外。)

CSSのbackgroundプロパティのヴァリューの表記に、Google Chromeでは読み込めないものが有るのではないかと思い、CSSをチェックしてみます。

CSSの該当部分は、

としているんですが、Google Chromeでは
1. -90degは使えず、ディフォルトのleftになってしまう。
2. -webkit-linear-gradientでも -webkit-gradientでもなく、linear-gradientのヴァリューが使われる。
様です。

Google ChromeもSafariもSleipnirもwebkitだから、-webkit-linear-gradientを使うもんだと思い込んでいたんですが、意外です。
(SafariもSleipnirで確認してみたら、予測通り-webkit-linear-gradientを使ってました。)

そう言う事ならlinear-gradient-90degtopに変え、

としたら、正しい表示になりました。

正しい方

正しい方

結論は、「degを使って角度で表示させず、topやleftを使う。」という、ものすごく簡単な事でした。

しかし、「何もしていないのに、以前とは表示が変わってる」という1番の謎が解決できてないです。うーん。

私、気になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です