移动端兼容问题总结(3)

发布于：https://www.luoyangfu.com/art...

蒙层点击滚动穿透问题

描述: 移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动

解决方式:
蒙层出现的时候，给底部被覆盖的滚动容器 position: fixed; 并设置 overflow: hidden。如果有可能可以可以设置 width: 100vw; height: 100vh这样，防止滚动穿透

flex布局下文本省略问题

描述: 在flex 布局下，text-overflow 会失效, 无法使用样式让文字自动省略

解决方式:
flex 布局下包裹一层，然后设置父级层 min-width: 0 即可。

---

2019-08-02 补充：

关于min-width: 0原因，在于flex布局下，min-width 默认值为 auto, 设置min-width: 0； 让flex布局更合理的表现.

MDN规范说明Specifications
w3c中 《CSS Flexible Box Layout Module》
2分钟学个CSS小技巧 flex 项中子元素文本溢出截断 text-overflow:ellipsis 失效问题 – flexbox 布局中 flex 项的宽度计算原理

移动端1px问题

position: fixed 在ios 抖动问题

描述: 在滚动容器，设置fixed元素的时候，ios下会一直抖动

从滚动容器中移除 fixed 布局的元素，改在外面fixed

rem, em等产生小数像素值在android下问题

描述： 使用相对的单位时候，出现0.989px这样的单位，android下无效

修改为粗字体时候，会导致::after 消失

android 字体无法加粗问题

描述: 给予android webview上 font-family 粗体时候， 字体无法加粗

设置font-weight: bold。在ios上不会生效，在android上时候，字体会变粗。不能设置font-weight: number; 这个也不会生效的。