css在ios手机闪屏问题怎么解决办法

html-css06

css在ios手机闪屏问题怎么解决办法,第1张

1、一种是dom结构复杂2、另外一种是加载了过多的css样式,3、前者好解决,后者的话如果用了mui.css就比较麻烦了3、现在是尽量少用mui.css,要用到一些mui的控件时,就把依赖的样式从css中拷贝出来4、建议官方把css拆成 base.css+各种控件.css,后来我发现还真不好拆,前期没设计好,后期越来越臃肿。

不光是css3,gif动画也是,不信你打开一个gif 滚动的时候看它还动不动。

iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构,当用户只要触摸接触了屏幕之后,系统就会最优先去处理屏幕显示也就是Touch这个层级,然后才是媒体(Media),服务(Service)以及Core架构。

所以说,当系统接收到Touch事件之后会优先响应,此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了,哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载,直到你的手松开。

解决办法有两个,各有瑕疵:

不要使用 scroll 事件(此事件会被暂停),而是采用 touchmove(此事件会在用户触屏滚动的时候不断触发)。瑕疵是,在结束触屏后惯性滚动的时间里,touchmove 无法被触发了(scroll 当然也不行);

基于上一种方法,在所有的 touchmove 事件中,强行 preventDefault 阻止掉事件,然后根据 event.pageY 来手工设置所滑动元素的 scrollTop 值。当然,这样一来就没有了惯性滚动。

你也可以在 touchend 之后,手工模拟惯性滚动,计算速度以及速度衰减,可以参考各种各样的滚动插件。

CSS加载失败,出现这个问题,一般是因为的css路径书写错,或者是在浏览器中禁止掉了css的加载,可以重新启动浏览器刷新,在文件中css的调用,一般都是通过link加上你的路径来实现,具体可以看下代码:

<!DOCTYPE html>

index

//注意好文件名的书写就没问题了。