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

Advent Calendar
CSS

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