Blinkでメディアクエリーのwidth/heightがスクロールバーを含むように

Blink WebKit Chrome CSS

Chrome 28がBetaに移った。表面上とくに違いはないだろうけれど、BlinkなChromeですよ。

さて、タイトルで言ったとおりの変更がBlinkに行われた。

M28に入るかなと思って試したんだけど、そう動かなかったのでこれはM29からになりそう。Stableまでは3ヶ月ほど猶予があるから、入らなくてよかったかも。

ええと、どういうことかというと、もし、

  1. RWDなどメディアクエリーを使うサイトを作っていて
  2. クエリで width (あるいは height) を使っていて
  3. ChromeもしくはSafariをメインに作っていて
  4. そのサイトをFirefox, Opera, IEでテストしていない

という場合、ブレークポイント前後で予期せぬ横スクロールバーが出る可能性があるのでお気をつけくださいというおはなし。

仕様のおさらいとWebKitのバグ

メディアクエリー仕様では媒体特性 width, height について、スクロールバーがある場合、その幅を含めた値が媒体特性のとる値と定義されている。

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

Gecko, Presto, Tridentはこれにしたがって実装しているのだけれど、WebKitのメディアクエリー実装には width, height がスクロールバーの幅を含めないっていうバグがある。

これがBlinkにも引き継がれたのだけれど、最初に書いたようにちょっと前に修正されたと。

Macだと気が付きにくい

この挙動、Media query width and vertical scrollbars demo pageにて確認できる。ただ、Macだとめんどくさい。

スクロールバーの幅を含めると書いたのだけれど、Lionからはスクロールバーがオーバーレイなものになった。このスクロールバーは、ページや要素の幅/高さに影響していない。Chrome/Safariをメインに〜と書いたのはそういう理由。

System Preferences→General→“Show scroll bars”から“Always”を選択すればスクロールバーを表示させられるので、ちょっと面倒だけれどどうぞ。

もっとも、楽なのはFirefoxかOpera (Presto)で試してみること。どちらも現時点で仕様に準拠していて、かつオーバーレイスクロールバーを実装していないのでどうなるかがわかる。あと、そろそろスクロールバー何とかしろよという話については、すでにAuroraだとオーバーレイスクロールバーになっているので、もうちょっと待たれいですよ。

直さなくてもいいような気をつけたいような

問題意識高いひと（めんどくさい）なのでくどくど書いたけれど（めんどくさい）、そんな大した問題でもないかなとも思う（めんどくさい）。

あまりに幅にピーキーなつくりにしてなければ、だいたい大丈夫じゃないかなと。あと、Firefoxとかでチェックしてたら、そう起こらないと思うので。
問題があったとしても、ブレークポイント前後でウインドウ幅びろびろさせたりする人はWeb制作者以外にはそういないだろうから、気にしなければそれまで、でいいんじゃないかなと。

ただ、JavaScriptでページの幅とって何かしたりするものがあると、15px前後（スクロールバーの幅ぶん）ずれが生じるかもしれない。

あと、そんなないと思うけど、matchMedia() にマッチさせたい幅からスクロールバーぶん引いた値をクエリとして渡してる場合は書き換えないといけない。

ぐうぐうたらら

viewport（metaのじゃないほう）においてはスクロールバーの幅を含めないほうがsensibleなんじゃないかとも思わなくないけど、CSSがsensibleであったことなんてないのでこれについては諦めてもらうしかない……。

“responsive”と呼ぶサイト作ってて、幅に敏感すぎるつくりは気が利いてないってことなので、ちょっとゆるめに。ピクセルセントリックだと、ちょっと難しいのかもだけど。

Opera 14デスクトップ版がいま出てしまうと、Chrome 26ベースなので、後退するのが切ないところ。早く出てほしいけれど……。

このパッチWebKit側でマージできたりしないだろうか。OS X/iOSでは影響しなくても、他のWebKitなブラウザでは影響するので。