iOS开发之UIWebView黑边的解决方案及浅析

先放上bug演示:

BugShow1

可以看到,在iPhoneX上,网页加载中会在白底的webView底部出现一块黑边,这个就很影响用户体验和美观了,如果加载时间长一点,这个效果就会更加明显。
BugShow2

经过测试,发现这个问题不只出现在iPhone X及以上机型,其他机型同样有,只是平时我们网络很快的话,不去拉就看不到底部的黑边,实际是存在超过屏幕外的地方
BugShow3(iPhone 8)

那么怎么解决这个问题呢?

解决方案(网上查阅资料得到) :

self.webView.backgroundColor = [UIColor whiteColor];
self.webView.opaque = NO;

好了,如果只是想看这个问题如何解决的话,到这里就可以点左上角或者右上角叉叉关闭了,以下是我对这两行代码如何起作用的一些个人分析(扯淡😂)。

分析:

为什么这两行代码就解决了这个问题呢?是的,一开始我也以为只是iPhone X类机型才会出现的问题,会想用这样的代码去解决:

//非完美解决方案
self.webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

这样是很方便,只一行代码,iPhone X以上机型不会再出现问题,但同时却也没有了底部自动缩进的效果,x类型设备滑到最底部的时候,网页最底部会紧贴着设备最底部,效果不太好,如果想要自动缩进的话就不方便了。

通过改变scrollView的Behavior属性为UIScrollViewContentInsetAdjustmentNever
完美解决方案

前者是相当于放弃safeArea自动缩进的功能来实现去黑边的效果,但是其他非X类机型上任然存在问题,而后面这个才是真正解决了问题,且不影响contentInsetAdjustmentBehavior属性的使用。
那么这两行代码是如何解决这个问题的呢?
我们先来看一下剖析图

解剖图

从图中我们发现UIWebView的结构是UIWebView的子视图是一个UIWebViewScrollView,然后UIWebViewScrollView上又有一个UIWebBrowserView,就是图中我选中的View,很明显黑边也就是这个东西导致的。

然后我们从opaque入手,从官方文档上,我们得到这样的介绍

This property provides a hint to the drawing system as to how it should treat the view. If set to YES, the drawing system treats the view as fully opaque, which allows the drawing system to optimize some drawing operations and improve performance. If set to NO, the drawing system composites the view normally with other content. The default value of this property is YES.

也就是说,如果这个属性为YES,这个视图就表现出这个属性的字面意思,不透明,并且绘图系统会进行一些优化来提升性能;如果设置为NO,绘图系统将会把它和其他视图结合在一起,肯定也不会进行性能优化,所以,这里我们把它关闭,实际上需要它透明,然后不用优化性能。emmm...

???

所以这跟我们实现的效果有什么关联呢?

好吧,试着去理解一下,是我们这里的webBrowserView导致的问题,那么就从它下手,这里提到透明,难道是把webBrowserView变透明了?嗯?但是我们这里设置opaqueNO的不是webView吗?说着我尝试了一下。
因为我是用storyboard做的,webView默认opaqueYES

我们在这里打个断点

啵一下webView的opaque
可以看到webView只有一个subView
通过刚才的图层分析,我们知道webBrowserView在webScrollView之上,所以这里啵出webScrollView的subViews,直接找到了我们要的webBrowserView
一步步来,所以这里啵出的就是webBrowserView的opaque属性

总结一下,正好webViewwebBrowserViewopaque属性都为YES,好,那我们按照解决方案中说的改为NO试试。

在storyBoard上改为NO

运行起来:
啵一下证明改了

再啵一下webBrowserView的opaque属性,等等,我发现了什么!

webViewopaque属性改成NOwebBrowserViewopaque也变成NO了,是不是父视图的opaque属性改变会导致相应的子视图的opaque属性跟着变化呢?我也去做了一个实验,结果证明并没有绝对的关系,大家有兴趣可以试试在一个Viewadd另一个view,然后两个viewopaque设置不同,打断点,啵出他们的opaque属性,会发现没有丝毫影响。

那这里因为webView是系统封装的一个独特的视图,它内部可能有什么不为人知的秘密我这里就只能做个猜测了,如果有懂其中原理的大神还望评论区留言,谢谢啦🙏!

这里至少证明了webBrowserViewopaque会随着webViewopaque属性相应改变。

好,我们执行了第一句webViewopaque设置为NO的代码,看下效果

效果1

整个webView加载后变成了网页默认的背景颜色,看下剖析图:

解剖图1

webBrowserViewwebView的背景颜色变成一样了,我们改变一下webView的颜色来证明这个结论:
效果2

解剖图2

可以看到,将webView背景颜色设为绿色后,webBrowserView的背景也变为绿色了。

OK,那么第二句webView.backgroundColor = [UIColor whiteColor]也可以解释了,webViewopaque设置为NO后,webBrowser就没有了黑边,并且颜色跟webView的背景颜色一样,之所以要写成白色,可能大多数需求都是白色吧,所以这里又获得一个技能,想要设置成啥颜色直接改变webView的背景颜色就可以了,不一定是白色,按照需求来就可以了。

总结:

webViewopaque属性为YES时,webBrowserViewopaque属性也为YES,这个时候,webBrowserView不透明,且绘画系统会对它进行优化,可能认为是直接渲染成白色比较省性能吧,也就是性能优化的结果,而底部的黑边就是加载网页的内部控件所留下的效果了(关于webBrowserView内部控件,就触及到我的盲区了,如果有懂这其中原理的请不吝赐教),总之也是跟性能优化相关;

而将webViewopaque属性设置为NO时,webBrowserView也会相应的设置opaqueNO(没有为什么,系统封装的控件),这个时候绘画系统就认为webBrowserView是透明的,却是直接将webBrowserView的颜色设置为webView的颜色,可能是因为webBrowserView要加载并显示网页的内容,不能设置成透明的原因吧,所以并没有让它透明,而是做了一个类似透明的效果,也就是将背后视图的颜色设置为自己的颜色(哈哈,你懂得,猜测)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容