1.animation动画掉帧闪烁
(1)触发重新布局的属性有: width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
(2)不会出发重新布局的属性有:transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。
2.低版本安卓中,绝对定位后的层级关系
html代码:
<div class="line">
<div class="right-rate-bottom"></div>
<div class="right-rate-up"></div>
</div>
css
如果布局要求right-rate-bottom在right-rate-up下面,需要增加z-index属性。
3.安卓4.1水平垂直居中问题
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
不生效,会发现上下垂直居中了,而左右不垂直居中。
左右居中margin:0 auto;
上下居中
position: fixed;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
4.div宽度足够,文字却折行
具体原因未明,将div改为span标签解决
5.ios 中,滚动区域和固定区域冲突问题
参考文章https://www.cnblogs.com/xuniannian/p/8722393.html
具体实现,与上述文章不是完全一样。
css
.vh-area {
height: 100vh;
width: 100%;
.scroll-area {
position: absolute;
top: 0;
bottom: 1.7rem;
left: 0;
right: 0;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: auto;
&::-webkit-scrollbar {
display: block;
width: 5px;
}
}
}