dcloudio / dcloudio/mui

排查特定结构下table在chrome 30.0.0下渲染出错的问题记录

Open
#154 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
13.5k
Forks
6.5k
PR merge metrics
No merged PRs in 30d

Description

这几天一直在解决一个安卓4.4的一个的渲染问题。安卓4.4的webview改用chrome 30.0.0。问题的结构如下结构如下:

``` html







......
有些class是js自动加上去的。<-->
```

在某些情况下从a链接跳转到这样的结构里有时会碰到页面空白页或者表格只渲染一半的情况,改用ul模拟表格也是会出现这样的情况,而且这样的情况在chrome 30下很频繁出现。开始以为是webview对表格渲染有问题,但是直接使用表格或者不加载mui.css文件的情况下表格是能够完全显示的。
后来注意到网上有讲chrome的绝对定位有时候会问题所以主要考虑会不会是这个原因。所以就从这个结构里的table开始向上一级一级查找元素定位为的position: absolute;,用调试工具先把div.mui-scroll用$0.innerHTML=$0.innerHTML的方式替换,发现及时渲染正常的也面也会立马出现白页,似乎真的没有再重新渲染。审查里面的表格元素的高度从某个开始后都为0,导致整个页面变成白页。又把div.mui-inner-wrap结构用同样的方式页面由白页变正常。同样到div.mui-off-canvas-wrap也是如此,所以把这两层结构删掉,重复跳转页面三十几次没有再出现白页或者渲染不正常的问题。
同样的不改变结构把body上的.mui-fullscreen里的position: absolute;改为position: static;或者position: relative;问题也没有出现。所以有理由怀疑是这样的结构产生的问题。猜测可能是chrome在对position: absolute;的元素有特殊做法导致的。使用各种CSS方式希望能解决问题但是一无所获,暂时先记录下。希望能有更好的解答。
附上2张排查表格时的对比图:
![qq 20160107150446](https://cloud.githubusercontent.com/assets/7822744/12165314/dcb21d00-b557-11e5-8c05-a0c97e888b4e.png)
![qq 20160107150433](https://cloud.githubusercontent.com/assets/7822744/12165315/df20e314-b557-11e5-9cc4-865b48b85152.png)
上面是用ul模拟的表格,第一个图里的表格高度是正常的,下面一张是相邻的元素,高度已经为0了,后面的元素高度也都没了。



Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.