FAQ
踩雷遊記 - fr and white-space

踩雷遊記

grid 要使用全螢幕的寬？

先是 fr and white-space

用 grid 的時候， chrome 很正常，在 ff debug 發現的...

我的 grid item，沒有如網格排版，
雖然各 grid item 起始位置是如預期排列在網格位置，
但 grid item 中的元素，寬度任性展開，且會推開網格。

先結論：

我的 grid 容器使用了 fr 做 column 單位。
grid item 中又有一個容器 (巢狀容器)，
並使用 white-space: nowrap; overflow: hidden;，

容器 overflow: hidden 會失效，
文字會因為 white-space 推開容器。

像這樣： https://codepen.io/o_____o/pen/JLLqOb

解決方法：給有單位的寬度。
（然後不能用 fr 好煩...）

這個問題在 chrome (65) 和 ff (59) 都發生...

為什麼先前在 chrome 沒發現，因為在 "標題超過..." 的作法上，
我有用 webkit 前綴的作法，讓他可以 "多行..."，
而 ff 我就只讓他 "一行..." 而已。

然後 "多行..." 消失？！

debug 過程，ff 好了，竟然 chrome 不見了！
在瀏覽器 devtool 少了這個屬性，
似乎 -webkit-box-orient: vertical; 沒有被 (sass-loader? postcss? cssnext? autoprefix? cssnano?) 編譯出來？

-webkit-box-orient 之前測試移除時無異樣，不知用途。現在沒加會錯誤！？

之前瀏覽器有編譯出！因為是不懂的屬性，為測試效果，在瀏覽器測取消勾選後竟無反應，但為了保險我還是留著沒刪。現在為沒編譯出來，那之前是？？我的設定也沒動過，而且下面 issue 是去年 Jan 2017 的，早在我建立這專案之前。

Cssnext 中 autoprefix 有改變？

Cssnext bug？上次我有一個地方的第一行 display: block 也不能被編譯出，有關係？

(莫名其妙是現在，隔天早上來公司想再多測、重現問題，把昨天對 -webkit-box-orient 增加的機制都移除。一切竟然又是正常！想罵髒話，這是什麼靈異事件？！)

這裡看到的資訊，試有效...
https://github.com/postcss/autoprefixer/issues/776

他是 Autoprefixer v6.7.0 移除了 "-webkit-box-orient" 規則.
v6.6.1 沒有問題.

我是用 cssnext，下面就有人提出解法：

一種是在 .browserslist 加入舊瀏覽器。一種是阻止 Autoprefix 自動移除舊屬性。

var postcss = require('postcss');

var css = postcss([
  require('postcss-cssnext')({
    browsers: 'chrome >= 42, safari >= 8',
    features: {
      autoprefixer: {remove: false}
    }
  })
]).process(`
.foo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
}`).css;

console.log(css);

此 post 發言者表示：
「我想 option（預設）remove：true 這個行為，
是在 "現代瀏覽器也被指定" 時，去刪除過時的規則。

這樣本來編譯成 display: -webkit-flex; display: flex;
就可以簡化成 display: flex;，如果可能的話。

但單獨的 display: -webkit-flex;
會保持display: -webkit-flex;。

這個案例看來應該是一樣的。

令我驚訝的是 -webkit-box-orient規則單獨無條件被剝奪。
我好奇的是，它是否為一個有意的或是建議，因為似乎沒有其他規則是這樣被對待。」

但是 remove: true 該不會全部舊的都會留著...感覺會很髒啊....

找資料的時候發現這篇：類似的狀況，似乎已經解決。
參考一下它回報問題的格式。
https://bugzilla.mozilla.org/show_bug.cgi?id=1369131

User Agent:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/58.0.3029.110
Safari/537.36

重現步驟：

使用 white-space: nowrap 和 overflow: hidden，
當與 CSS grid 結合使用時，會產生不如預期的結果。
這似乎已經部分解決了，但是我注意到，
當所討論的字符串是 nested (巢狀) 元素，並且應用了 display：grid 時，仍然存在問題：

1.打開這個 codepen：https://codepen.io/chipcullen/pen/GmVxdV
2.注意這兩個子元素 html 結構，和以下屬性的關係：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

實際結果：

這似乎已被部分解決。

在 Firefox 53 中：
1.兩個子元素寬度都延伸到字串長度，且沒有可見的 ...（省略號）。

在 Firefox 55 中：
1.第一個字串位於 display：grid 容器的直接子元素，
它在該子元素的預期寬度處切斷，省略號可見。
2.第二個字串，它是 display：grid 容器直接子元素中的 nested 元素，
它會推出該子元素寬度，並沒有省略號。

預期成績：

兩個字符串應該在容器的 "寬度" 處切斷，並且可以看到省略號。

踩雷遊記 - fr and white-space