最近流行りの斜めデザインのレイアウトを組む時に気をつけたほうが良いこと

こんばんわ。寒いですね。
いいネタが思いつかなかったので、最近苦戦した斜めデザインのCSSについて書きます。
斜めのデザインをCSSのskewで再現しようとすると、特定のブラウザで挙動が不安定なので気をつけよう・・・という内容になります。

問題の内容

まずはこれを見てください。

See the Pen povPeoy by Tatataichichichi (@unt_taichi) on CodePen.

よくある背景画像が斜めにトリミングされたデザインのレイアウトですね。
では、次にこちらを見てください。

See the Pen gObWweb by Tatataichichichi (@unt_taichi) on CodePen.

斜めになっている方向が、上のものとは逆向きになっているだけなのですが。。。
実はこちら、Safariなどのwebkit系のブラウザでレンダリングのバグが発生します。
背景画像の斜めの要素の部分が、ページをスクロールしたりコンテンツの表示域を可変させると、チラついた状態になり正しくレンダリングされません。

このレンダリングのバグの発生条件は、transformのskewで右側に傾斜をつけた要素に対して、overflow:hiddenのCSSが適用されると起こるようです。

原因？

で、おそらくの原因ですが、transformのskewで角度をつけたことにより、スタックコンテキストが生成されz-indexがただしく適用されず、Safariなどのブラウザ上ではレンダリングのバグとして表示されてしまう・・・ように見えます。

スタックコンテキストとz-indexについては、@ykyk1218さんの記事で分かりやすく書かれています。

参考記事：z-indexが言うことを聞いてくれない場合はこの辺のことが原因だと思うよ
https://qiita.com/ykyk1218/items/155ec7a8552da9fb2d8e

解決方法・・・？

解決方法としては、transform:skewで斜めに角度をつけた要素に、更にtranslate3d(0,0,0)でスタックレベル（Z軸）の指定をしてください。
これでSafariでもチラつかなくなると思います。

See the Pen LYEyWmM by Tatataichichichi (@unt_taichi) on CodePen.

分からなかったこと

・・・skewプロパティを使うことによりスタックレベルがずれるのが原因として、どうして右側に角度がついた時にレンダリングがおかしくなるのだろう。。。もし詳しい方いらっしゃいましたら教えていただけると幸いです。

それにしても寒いですね。。。風邪をひかないように暖かくしてクリスマスを迎えましょう！