inline-block でレイアウトした結果、Webpack UglifyJsPlugin + Safari で臨死体験

2016-09-17

UglifyJsPlugin というか内部の minifier かなにか。

あらすじ

いくらやっても、2 つあわせて width: 100% の inline-block カラムが Safari でだけ改行してしまう。

https://jsfiddle.net/yaruLLry/3/ (Safari でみよう。改行しない方もめりこんでるけど)

原因 on Safari

Safari では改行後スペースとタグ間スペースの扱いが違う？

<div> <element/> <element/> </div>

<div>
  <element/>
  <element/>
</div>

原因 on Webpack UglifyJsPlugin

そして Webpack UglifyJsPlugin でのデフォルト minify は <element/>\n <element/> を <element/> <element/> にします。

解決策

改行を保持する設定をいれること。

// minified
"<div>\n<element/>\n<element/>\n</div>"

設定とか詳細

Webpack 設定

普通だとこうです (たぶん)。

{
  minimize: {
    preserveLineBreaks: true
  }
}

vue-loader を使っていると、vue-html-loader に設定を渡す必要があるのでこうなります。

{
  vue: {
    html: {
      preserveLineBreaks: true
    }
  }
}

なぜ (推測)

inline-block を用いたカラムレイアウトでは、改行時のスペースを埋めるために、マイナスの letter-spacing を入れます。これのいいところは、文字を挾んでいるその分だけしか詰められず、ブロック要素同士がめりこまないところです。

Safari 以外のブラウザではスペースを文字列として扱うので letter-spacing が安全に効きます。

Safari はどうもタグ間の明示的なスペースをブロック要素として扱っているらしく、-10em にしようが改行されたままです。