Permalink
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (72 sloc) 4.94 KB
layout page_type page_datetime page_id page_title page_tag page_description
./src/html/post.pug
post
2014-12-12T10:37:05
55
columnプロパティが特定の状況でおかしくなる
Advent Calendar
CSS
columnこわい。

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

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

<iframe width="100%" height="300" src="http://jsfiddle.net/o_ti/pcr3pr14/6/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

で、このデモは.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こわい。