fixed属性就能促成这些作用公海赌船网址

ios系统和少数活动端background-attachment:fixed不包容性,未有其他功用,但足以hack一下就足以了,代码如下:

活动端fixed的元素抖动的题材,端fixed成分抖动

干活中发觉,给三个因素添加fixed属性,让它一定在窗口有些地方,直接加fposition:fixed属性就能落实这几个作用;

在安卓手提式有线电话机上的效用都比较好,不过ios系统的各自浏览器包容性就不佳,如QQ浏览器、UC浏览器、360浏览器(那多少个是ios最简单出难点的浏览器);

题材:当用户神速度滑冰动页面的到时候,fixed的要素就会在窗口跳动或许抖动,13分影响用户体验

上边提供多少个缓解方案,仅供参考,如有越来越好更实惠的消除办法,欢迎留言调换斟酌!

 

方法一:

给body设置高度100%

body,html{
    widht:100%;
    height:100%;
}

这一个主意很有效,然而适用于本人单独开发的页面。

设借使连串中1度做好的页面,有别的特效,直接设置这么些性子,恐怕对页面包车型大巴别的职能造成影响。

假设运用此法,本地调节和测试效果不佳,提议不要采纳。

 

方法二:

给fixed的要素添加背景定位的属性

background-attachment:fixed;

切忌:这么些天性不要给有背景图片的要素添加

本条格局看起来也卓有成效了,由于身边向来不测试机的界定,无法测试效果,有标准的爱人能够试一下;

 

上边是互连网上查到的其余格局,作者试过没起效果,列出来供我们参考

方法三:

给一定定位的要素添加transform属性

transform:translateZ(0);或者transform:translate3d(0,0,0);

自身尝试的结果是,这些办法未有起效;

 

方法四:

多加壹层盒子,外层fixed固定定位,内层的装置相对定位absolute;

 

还有壹种艺术说能够用相对定位模拟固定定位,自己么有模拟出来,网上提供的不二诀窍也从没兑现这几个作用。

 

 

 

 

http://www.bkjia.com/Javascript/1226569.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1226569.htmlTechArticle移动端fixed的元素抖动的问题,端fixed元素抖动
工作中窥见,给二个成分添加fixed属性,让它一定在窗口有个别地方,间接加fposition:fixed属性就…

ps:想在哪个标签加背景,能够在它class后:before.

body:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(path/to/image) center 0 no-repeat;
  background-size: cover;
}

内容出自:前端录»ios_iphone_移动端background-attachment:fixed兼容性[失效]

原稿链接:http://www.wozhuye.com/index.php?m=content&c=index&a=show&catid=3&id=318

相关文章