移动端css3的一些奇葩事er

    CSS

前言

最近做移动端 H5 及CSS3的东西比较多。 主要应用在微信服务号和企业号,所以主要是兼容微信浏览器(Chrome 37+)。 这个版本的webkit内核对 CSS3的支持已经相当完善了。但还是免不了要踩到一些坑。本文作为记录,会持续更新,以供后续翻看。

z-index: -1 引发的问题

当设置z-index 为-1的元素,在页面中存在的时候,微信浏览器中会出现莫名其妙的bug。
bug复现方法:

制作一个页面高度大于一屏高度的界面,然后在页脚部分加入如下样式的元素

1
2
3
4
5
<div style="position:relative; width: 100px; height: 50px; margin:0 auto;border: 1px solid #ccc;">
这里是文字内容
<div style="position:absolute; height: 1px; background-color: red; left:0; right:0; top: 50%;">&nbsp;</div>
</div>

上面的代码,在IOS版本的微信浏览器中(测试用微信版本:6.5.2 设备:iphone 7 plus 128GB ios版本:10.2 14C92) 当拖动到一屏以下的部分再返回,就会出现上方的画面闪动的情况。而去掉z-index:-1属性,恢复正常。 因此在移动端开发中,慎用 z-index:-1

keyframes动画中 使用 绝对定位的元素 进行位置移动导致的问题

问题出现的情况为: 当使用keyframes动画控制 absolute定位的元素 进行 top/left 等位置变换的时候,在ios10下会出现拉动到底部拽住不松开导致屏幕快速闪烁的问题。

复现代码如下:

1
2
3
4
5
6
7
8
<!-- 海豚提示 -->
<div class="dolphin-tips">
<span class="dolphin-icon"></span>
<div class="tips-box">
温馨提示:这里是温馨提示的内容。
</div>
</div>
<!-- end of 海豚提示 -->

CSS代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*
++++++++++++++++++++++++++++++++++++++++++++++
海豚提醒
++++++++++++++++++++++++++++++++++++++++++++++
*/
.dolphin-tips {
color: #ff5b95;
margin-top: 4rem;
position: relative;
font-size: 0.6rem;
background: url(../img/wave.png) repeat-x #fffaea;
background-size: 6%;
padding: 1rem;
padding-top: 2rem;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
-webkit-animation: tipswave 12s linear infinite;
animation: tipswave 12s linear infinite; }
.dolphin-tips .dolphin-icon {
display: block;
position: absolute;
width: 3.8rem;
height: 3.8rem;
top: -2.4rem;
left: 50%;
margin-left: -1.9rem;
background-image: url(../img/dolphin.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: dolphinjump 2.5s ease infinite;
animation: dolphinjump 2.5s ease infinite; }
@-webkit-keyframes tipswave {
0% {
background-position: 0% 0%; }
50% {
background-position: 50% 0%; }
100% {
background-position: 100% 0%; } }
@keyframes tipswave {
0% {
background-position: 0% 0%; }
50% {
background-position: 50% 0%; }
100% {
background-position: 100% 0%; } }
@-webkit-keyframes dolphinjump {
0% {
top:-0.25rem; }
50% {
top:0.25rem; }
100% {
top:-0.25rem);} }
@keyframes dolphinjump {
0% {
top:-0.25rem; }
50% {
top:0.25rem; }
100% {
top:-0.25rem);} }

修复方案:
将动画中的 top: xxrem; 修改为 transform: translateY(xxrem); 问题解决。 其实仔细想一下, top等的位移其实是触发了 repaint 而 translateY 的方式则只是CSS自身的坐标偏移,对性能的消耗还是很轻微的。

页阅读量:  ・  站访问量:  ・  站访客数: