columnプロパティが特定の状況でおかしくなる

CSS 珍百景 Advent Calendar 2014の12日目。

colunmプロパティを使った時にいくつかのブラウザで内容物のbreakがおかしくなる。デモは今回はJSFiddleにおいた。

で、このデモは.itemが3つごとに3カラムに別れて表示される想定でスタイルしている。このHTMLだとfloatではこういう表現はできないし、positionでやるのは面倒なだけなのでcolumnプロパティ最高だなと思っていた。PC版のGoogle Chrome 39系とiOS 7系のMobile Safariは期待どおりで問題ない。.caseの高さを目一杯使って.itemがきちんと収まっている。

.itemは.caseの高さにちょうど収まっている。

しかしFirefox 34やIE11では.caseの高さが.item3つ分より足りないような挙動になり、.itemの一部がbreakされて次のカラムにめり込んでいる。.caseに指定した背景色のlimegreanが出ているように、別に.case自体の高さが小さくなったわけではない。にも関わらず、.itemの一部が次のカラムにbreakしている。さらに不可解なのは中段のデモで、column-widthcolumn-gapの合計が.caseの幅を超えると.item3つ分の高さがぴったり収まり、一部がbreakされるようなことはなくなるというところ。

.itemは.caseの高さを利用しきれず、次のcolumnに一部だけbreakして表示されている。

column-widthcolumn-gapの合計が.caseを超えた時に、column-rule(黒い帯)の表示位置が変になるのも面白い現象ではある。仕様ではカラム間のちょうど中央に配置されるはずだ。

ややこしいことに、iOS版のGoogle Chrome 39.0.2171.50で見るとiOS 7.1.2では期待通りに表示できるが、iOS 8.1.1では.itemの一部がbreakされてしまう。同じバージョンのブラウザでプラットフォーム別にこういうことが起こるのはちょっと困る(Android OSは怖くて見ていない)。表示の状況をまとめると以下の通りとなる。

Mac Window
Chrome 39.0.2171.71
Chrome 41.0.2241.0 canary
Firefox 34
Firefox 37.0a1 Nightly
Internet Explorer 11 -
iOS 7.1.2 iOS 8.1.1
Mobile Safari
Chrome 39.0.271.50

IE12 Platform Previewでどうなっているか気になるけど、 CSS Multi-column Layout Moduleは全然動いてないので期待はできなそう。それに、columnをまたいだ時の内包物のbreak指定はbreak-after, break-before, break-insideというプロパティで指定できるかと思いきや、これらのプロパティの 対応メディアはpagedだった。なのでvisualグループのscreenメディアでは使えない。 Editor's Draftではメディアがvisualに変わっているので、このまま行けばbreak-*プロパティで対応していくようになるのかもしれないが、そもそも高さが十分にあるはずなのにbreakされてしまうというバグなので、仕様うんぬんじゃなくcolumnなボックスのレンダリングの問題な気がする。なのでブラウザ頑張れ。

業務ではこの表示をクロスブラウザにすることができずに、結局columnごとにdivを作りそれをfloatさせて対応した。.itemの数が直近のユーザーの操作によって変動するので、合計値からcolumn数と幅だけ算出すれば簡単だなと思ったのだけど、つらい結果になった。

columnこわい。