你可能不需要知道的IOS的一些坑

© Young 2018-07-05 01:43
Welcome to My GitHub

在IOS中iframe中嵌入页面的clientWidth属性是由嵌入页面内容以及外部iframe的宽度共同决定的

具体来说在IOS中iframe中嵌入页面的内容宽度大于iframe容器宽度时,iframe嵌入页面的clientWidth属性等于页面的内容宽度;否则等于iframe容器宽度;

例子如下:https://newbieYoung.github.io/SomeBugs/bug-about-iframe-clientwidth-in-ios/container.html

使用Iphone手机访问链接则会看到上述图片左侧部分,使用Android手机访问链接则会看到上述图片右侧部分;

灰色部分为宽度不同的iframe元素,分别嵌入不同的页面;

灰色部分中的数字为嵌入页面的clientWidth属性;

其它颜色部分为嵌入页面中的元素,里边的数字为其宽度;

从上述例子我们不难看出Android中iframe中嵌入页面的clientWidth由iframe的宽度决定的,但是在IOS中则略有不同。

某些页面如果是根据clientWidth动态计算缩放比来实现自适应的话,在嵌入到iframe中时需要注意这个问题。

在IOS中某些情况下滚动页面时会出现图片渲染异常

例子如下:https://newbieYoung.github.io/SomeBugs/bug-about-img-render/demo.html

使用Iphone手机访问链接然后向下滚动页面之后再向上滚动页面就会发现背景图片消失了;

解决这个问题有以下几种方案:

  • 去掉 body,html 中的 overflow-x:hidden;

方案一:https://newbieYoung.github.io/SomeBugs/bug-about-img-render/demo1.html

  • 去掉 body,html 中的 height:100% 由局部滚动改为全局滚动;

方案二:https://newbieYoung.github.io/SomeBugs/bug-about-img-render/demo2.html

  • 去掉 .bg 中的 position:absolute 为了使页面看起来类似,需要设置 margin-top:-800px 让 .content 向上移动;

方案三:https://newbieYoung.github.io/SomeBugs/bug-about-img-render/demo3.html

由此可见这个异常情况是由局部滚动、overflow以及背景元素和滚动元素的定位关系共同决定的,因此解决办法并不局限于上述三种,还有诸如把背景设置在body或者把背景元素直接设置在滚动元素上等方法;

突然感觉能遇到要连踩这么多坑的异常也是件挺幸运的事情…虽然几个小时就这么过去了…至于这种渲染异常最终的原因暂时就不太清楚了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注