Mac：Safariで不思議な縦線が表示されるので検証してみる

MacのSafariで謎の縦線、表示されていませんか？

かめねこのMacBook Airは変な縦線が表示されてしまうんです、サイトを作成している時に気付いたのですが消えないんですよね、スタイルの指定が間違っているのかな？と考えていましたが、他のサイト様を見ている時にも表示されているのですよ。
初めは表示されていなくてもスクロールすると出現したりする神出鬼没な縦線、くせ者です。

もしかして「かめねこが使っているMacBook Airの不具合では？」疑問が生まれました。

Safariで不思議な縦線が表示される現象、これの発生条件を判明している範囲でメモしておきます。
この他にも表示される条件を発見すれば追記します。

3/8 追記
Appleより連絡有り、MacBook Air Mid 2012に使われているIntel HD Graphics 4000の不具合との事でした。
改善策は未だ検討中とのことで分かり次第連絡があるようです。

かめねこの発生した環境
MacBook Air Mid 2012
MountainLion 10.8.2
Safariバージョン 6.0.2 (8536.26.17)

※解決しました

長々と記事を書いた割りにSafariのバージョンアップによってアッサリと無事に解決しました。
ありがとうApple！
たくさんの方にこの記事を見て頂いたことを嬉しく思います。
Safariバージョン 6.0.3(8536.28.10)
上記のバージョンで謎の縦線が発生しない事を確認しました。

かめねこがサイト作成中に謎の縦線が表示されたスタイル

どうでしょう？縦線は表示されていますか？
かめねこのMacBook Airは中心に縦線が表示されています、さらに気付きにくいですがボックスの左右にも同じく表示されているんですよ。
テストスタイルのコードはコチラです。

#kamenekotest { margin:0px 0px 15px; padding:4px 0px 2px; width:600px; background-color:#fff; border-top: 1px #262626 solid; border-bottom: 1px #262626 double; box-shadow: #999 0px 2px 5px 0px; border-radius:5px; }

このテストスタイルを変更して原因を探ってみようと思います。

もし縦線が出ない方は「こいつ何を書いてんの？バカじゃね？」と言われかねないので画像を貼っておきますー
画像１

画像２

この記事を作成した時のスクリーンショットです。

テストしてみる

結果

謎の縦線が表示される条件は下記の場合だと思われる。

上下いずれかにborderを使用してborder-radiusを適用、widthが少なくとも500px以上の（widthは関係なかったようです）時に謎の縦線が発生する！！
犯人はお前だ！　border-radius！！！

かめねこ対策

うーん。犯人は分かったのですが解決には至っておりません。

スクリーンショットに映るので液晶の問題ではなくグラフィックボード？の問題でしょうか？
Safariでは縦線が発生、しかしながらfirefox等の違うブラウザで試すと表示されないのです、これってSafariの問題なの？

かめねこのMacBook Airの不具合？

自宅のiMacでも発生するのか試してみようと思います。今日はここまで！かめねこでした。
追記１：iMacでは発生しませんでした＞＜

追記２：この記事を書き終わってから見てみたら、謎の縦線がスクロールに合わせて出たり出なかったりすることが判明。
意味が分からない、なぜだろう？

その後

Appleサポートへ電話してみた。
症状を説明後にシニアアドバイザーに交代、感じの良いアドバイザーさんに再度状況を説明、後日連絡を頂くことになりました。

3/8追記
３月某日にシニアアドバイザーの方から連絡をもらいました、原因は以下の通り。
MacBook Air Mid 2012に使われているIntel HD Graphics 4000の不具合との事、改善策は現在検討中とのことらしく改善策が見つかり次第再度連絡を頂けることになりました。

Safariでは発生するのに他のブラウザでは発生しない、グラフィックの問題って難しいですね。

３月中旬
Safariのバージョンアップによって解決されました！

かめねこ