今日、取引先のサイトをメンテナンスしようと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の該当部分は、
|
1 2 3 4 5 6 7 |
background: -webkit-gradient(linear, left top, left bottom, from(#b8f0c7), color-stop(50%, #1a8513), to(#284e00)); background: -webkit-linear-gradient(-90deg,#b8f0c7 0%,#1a8513 50%,#284e00 100%); background: -moz-linear-gradient(-90deg,#b8f0c7 0%,#1a8513 50%,#284e00 100%); background: -o-linear-gradient(-90deg,#b8f0c7 0%,#1a8513 50%,#284e00 100%); background: -ms-linear-gradient(-90deg,#b8f0c7 0%,#1a8513 50%,#284e00 100%); background: linear-gradient(-90deg,#b8f0c7 0%,#1a8513 50%,#284e00 100%); } |
としているんですが、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の-90degをtopに変え、
|
6 |
background: linear-gradient(top,#b8f0c7 0%,#1a8513 50%,#284e00 100%); |
としたら、正しい表示になりました。
正しい方
結論は、「degを使って角度で表示させず、topやleftを使う。」という、ものすごく簡単な事でした。
しかし、「何もしていないのに、以前とは表示が変わってる」という１番の謎が解決できてないです。うーん。
私、気になります。