5月19日に発表されたChrome の安定版最新バージョン「Chrome 43」に floatさせた要素のwidthが何故か 0.016px 増えてしまい レイアウトが崩れる現象が起こっています。

See the Pen mJbepe by Soichi Masuda (@masuP9) on CodePen.

こちらは開発版であるChrome Canaryの頃から見られた問題でしたが、解決されないまま安定版としてリリースされたようです。

Chrome の issue にその問題が取り上げられていましたのでそこを見てみますと

Mismatched whitespace widths cause a wrong width of inline box.

In LayoutText::trimmedPrefWidths, we calculate a preferred maxWidth and return it after applying LayoutUnit::fromFloatCeil. So the width of whitespace is also ceiled. However when we strip out trailing spaces in stripTrailingSpace(), we just substract a raw space width without ceiling. This causes inline box including only image and whitespaces is wider than expected for some fonts. To fix this, we can simply substract the trailing whitespace width after applying ceiling for consistence.

BUG=478014

とあるので、本件はBugと認められ、すでにStatus: Fixed となっています。

この開発版の最新バージョン(version 45 canary)で確認したところ、Bug Fixはすでに開発版に取り込まれており、すでに修正されていました。

しばらく待てば、解決しそうですね。

私の英語力でざっくり訳してみますと

「これまで末尾のスペースの幅を取り除くときに切り上げずにそのままの幅を取り除いていたが いくつかのフォントで、画像を含む、インラインボックスの場合に、スペースの幅が広くなってしまっていた。なので修正するために切り上げてからその幅を取り除くようにした。」

というのが原因のようです。また独自に試してみたところ、画像ではなくinline-blockでも現象が見られましたので

• 特定のフォントが設定されており
• inline-blockとスペースを含む
• インラインボックス

のwidthの計算時に、広くなった空白の幅が追加されてしまうということのようです。

よって、上記の条件を外してあげると問題は起こりませんので、修正版が行き渡るまでは 下記のいずれかの対策を行うと良いかと思います。

• font-familyを変更する 例：font-family: "Verdana" ~~;
• 要素内のinline-blockをdisplay: block;
• 親要素の幅を指定する