overflow:hidden失效問題

2018-08-03 Questions about work

這幾天開發的時候遇到了個問題，如圖1。

寫了個demo demo 地址

因爲頁面並無進行總體縮放，致使在小屏幕手機上顯示會有異常。PM要求可以顯示最後一個完整的標籤。

當在iPhone5手機上查看頁面的時候，因爲設置了height以及overflow:hidden後面的標籤被隱藏了。可是邊框是用before僞元素實現的，並無由於overflow:hidden 而一塊兒隱藏（後面再探討這種邊框的不一樣實現方式）。

搜索解決方式時一直關注的是overflow:hidden失效，而沒有想過是由於使用了transform的影響。

網上搜到了一種解決方式：

在父元素上添加：transform-style:preserve-3d

試了下，果真好了，然而。。。換個手機，換個瀏覽器就不行了。這個屬性存在兼容性問題。

那既然跟transform有關，試一下transform:translateZ(0)，發現問題解決了，試了多個手機和瀏覽器，沒有兼容性的問題。

在解決問題的過程當中，發現了另外一種解決辦法，在父元素上添加position:relative。這也就是說，是由於overflow:hidden失效了致使了這樣的問題，而與是否使用了transform沒有直接的關係（我把transform去掉，仍然有圖1的問題，只能說使用transform能夠解決問題）。

緣由能夠看這個文章 overflow:hidden失效

從這個角度進行分析的話，由於咱們的before僞元素使用了absolute絕對定位，且外層沒有定位，致使了這個before元素沒有成功被隱藏，而相應的tag元素，因爲沒有設置定位，因此正常隱藏了。

那爲何使用了transform:translateZ(0)以後，問題也可以解決呢？

參考這個文章 transform對元素的影響

absolute絕對定位元素，若是含有overflow不爲visible的父級元素，同時，該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position爲非static屬性的聲明，則overflow對該absolute元素不起做用。

這裏涉及到層疊上下文的問題 能夠參考 層疊上下文

當使用transform:translateZ(0)時，生成了新的層，覆蓋在了上面。

補充

有的手機使用了transform以後仍然會出現上述問題，因此，更好的解決方式應該是設置position