修复miniblink无法显示某个网站的某个图标的bug

这个bug断断续续调试了三天。顺便把css解析温习了一遍。

起因是有大量用户反馈,他们的某个网站用了WEX5的日历控件,控件的切换年月日的图标显示不出来了:

这WEX5 还挺复杂。把网页代码精简了出来,发现单纯精态网页可以显示,动态就不行。

通过阅读wex5的代码,知道这个图标是通过

.prev-year, {

background:url(xxxx)

}

来设置背景图标的。

于是在blink里下断点:

ElementRuleCollector::collectMatchingRules

这里有句if (element.isStyledElement() && element.hasClass())比较关键。

这个函数会在收集元素会命中哪些css 选择器的时候执行。

而这句意思是如果一个元素有class,就走进去,把外部收集到的css样式,如link标签、style标签里的去和这个class对应匹配下。

堆栈如下:

同时在这个SelectorChecker::matchForRelation里会有这句

意思是不光本元素要匹配,父元素等也要。

这时我发现和正常流程比,这个图标父元素居然匹配中了一个样式(x-datePicker-touch)。于是我在SpaceSplitString里加了条件断点,一旦有元素设置了.x-datePicker-touch 这个样式,就中断。此时发现原来是js动态设置的。翻了下wex5的代码,居然是

这句设置的。此时终于明白了。原来miniblink默认开启了触屏的api···导致网站设置了一个pc版本不应该设置的样式。

bug的原因很简单,但调试这堆css的解析逻辑搞了我很久,特此记录一下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券