移动端开发所见问题

近期，做的移动端页面遇见了一系列的问题，为了以后都不忘记，特写博客来总结一下。

1. js中使用了transform:translate()时，会导致z-index无效。原因是给元素设置transform属性会创建一个新的stacking context。

那么问题来了，哪些情况下会创建新的stacking context呢？

MDN上有相关的介绍：

• the root element (HTML),
• positioned (absolutely or relatively) with a z-index value other than "auto",
• a flex item with a z-index value other than "auto",
• elements with an opacity value less than 1,
• elements with a transform value other than "none",
• elements with a mix-blend-mode value other than "normal",
• elements with isolation set to "isolate", on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto",
• specifing any attribute above in will-change even you don't write themselves directly

其中，第二条是我们平时最常见的，另外几条加粗的会随着CSS3的普及越来越常见。令我感到惊奇是，opacity竟然也会创建新的stacking context，你可以试着将上面两个例子中的transform换成opacity，会得到同样的效果。

2.在UC浏览器中音乐无法自动播放，必须有一个实实在在的时间才能够触发音乐播放，例如点击、滑动等。同时，在微信浏览器中也可能存在这个问题，但是只要在js中写上事件即可，而不用想UC浏览器那样“麻烦”。

3.页面中有某个元素position：fixed时，若还有原生的<select>选择框，那么在部分手机中，可能在select之后，导致fixed的元素无法回到正确的位置。解决方法是不用原生的select，而是模拟它。

4.flex的元素里面的元素如果宽度大于它时，宽度会被撑开。解决方法：flex后加上overflow：hidden。