阅读 336

前端调试:记Iscroll4 疑难杂症之z-index失效

前言

用了一个很大的词“前端调试”,事情是这样的,这两天一直在解决一个bug,我们用iscroll做了一个下拉刷新的产品列表页面,总会出现页面渲染错乱的问题,只要用js动态修改html或者在浏览器开发者工具中修改css、html就会恢复正常。

本来想分享一下iscroll的问题,避免大家走弯路,后来索性把我们定位问题的方法和过程也记录了一下。

页面效果

调试工具修改

目录

  • 前言
  • 以往诡异问题解决办法
    • 文档头类型
    • 标签闭合
    • 排除法
    • 百度/谷歌大法
  • 调试过程与解决办法

以往诡异问题解决办法

以前也遇到过很多类似的问题,大部分是用以下三种方法解决的

1. 文档头类型**

文档头要告诉浏览器用什么类型的语言和版本来渲染你的代码。 大部份前端书籍都有介绍HTML的来历,推荐书籍《web标准开发之道》。

我们需要了解HTML与XHTML的来历与版本,HTML 元素和有效的 DTD,出现渲染异常的问题如下:

  • 文档头未定义
  • 版本与标签不一致
  • 标签是否需要闭合
  • 标签是否支持大小写
简单列一下html与xhtml的历史

第一阶段 HTML4/HTML4.01

时间 HTML4\HTML4.01
1995年 IETF(因特网工程推动小组) 发布HTML2.0
1997年1月 W3C发布第一版HTML标准:HTML3.2
1997年12月 W3C发布:HTML4.0
1999年12月 W3C发布:HTML4.01

第二阶段 XHTML1.0/XHTML1.01/XHTML1.2/HTML4.01 随后,W3C将重点放在向后兼容的XHTML上, 2000年年初,W3C发布:XHTML1.0 完全兼容HTML4.01 紧随其后,XHTML1.1发布,放弃与HTML4.01兼容,移除大量样式标签、font、align等。

第三阶段 HTML2/XHTML5 2002年,W3C转变工作激进转变,提案HTML2,当时浏览器不支持、HTML4.01不兼容。 2007年,W3C内部提出HTML5,向后兼容 XHTML1.01 和 HTML4.01。 2009年放弃更新HTML2,然后就有了咱们念叨的HTML5.

2. 标签闭合

很多前后端未分离的项目,经常出现后端工程师套完页面以后出现页面错乱的情况,大部分都是标签没有闭合或者js生成的DOM没有闭合,很多高版本的浏览器可以自动补全不规范的标签,不影响展示,但是很多低版本的浏览器就没有那么智能了,比如IE。

3. 排除法

这也是一个常用的办法,删除js和css,如果还复现,那肯定是HTML的问题,然后再删50%的html,依次去定位问题,直到定位到问题代码代码。

4. 百度/谷歌大法

你懂得,有问题问度娘,疑难杂症一般在网上都有人分享或者吐槽,直接百度问题关键词。

调试过程与解决办法

解决问题的办法很多,简单写一下我的调试过程,虽然笨拙,写出来也可以避免大家重复我的笨拙。

  1. 确认jsp的文档头

    之前遇到过静态页面是HTML5的文档头,开发用的是HTML4,会发现异常问题,确认jsp与静态页面一致后,排除文档头问题

  2. 删除多余HTML标签

    把其他元素全部删除,仅留下上拉加载部分的DOM标签,还是存在问题,然后再对比标签,无异常,排除标签闭合问题

  3. 删除多余CSS样式

    团队的同事们比较认真的学习过张鑫旭大神的《CSS世界》,按照**“z-index 不犯二原则”**,页面并没有使用z-index,使用的positon定位,并有增加,删除其他css代码后,还是可以复现,感觉与positon有关系

  4. 删除JS代码

    注释掉iscroll实例就好了,然后再github上找position的lssues, 找到讨论关于 z-index、translate、transform的lssues链接,然后提取关键词搜索。

  5. 定位到问题点

    见张鑫旭大神的博客《Safari 3D transform变换z-index层级渲染异常的研究》

  6. 找到解决办法

    根据内容的理解,增加了transform: translateZ(100px)

最终效果 齐活儿

才疏学浅,如有问题恳请斧正。

关注下面的标签,发现更多相似文章
评论