Question

首先，我想说，我不是在寻找这个'问题'的解决方案，我只是想了解它是如何工作的（或者说正确 - 不起作用）。

所以例如我有一个块：

#block {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    -webkit-transform: translateZ(0);
}

.hidden {
    -webkit-transform: translate3d(-500px, 0, 0)!important;
    /*display: none!important;*/
}

并随机另一个块用于句柄点击事件，其中包含用于#block的切换类功能并调整大小以获取屏幕上的滚动条

再次 - 是的，我知道，我不能使用translate3d的固定位置，因为坐标系统（实际上我不完全理解它是如何工作的...... :(），我读了关于铬的规范和错误报告/ webkit，但我只是想明白为什么，我的意思是浏览器如何看待它以及为什么渲染如此奇怪......

这里有一些观察：

更改翻译位置（完全隐藏 - > -500px）：

- with scrollbar on screen :
    render hide/visible through time,
    like(one action = one click): hide-visibility(hidden-state) -> hide(visible) -> hide(hidden) -> visible(visible) -> hide(hidden) -||-

- without scrollbar on screen :
    nothing rendering; only then something redraw on screen(like scrolling or add textcontent to block(not in layer))

更改翻译位置（可见 - > + 50px）：

- with scrollbar on screen :
    works well, changing position on each time

- without scrollbar on screen :
    nothing rendering, only then something redraw on screen

更改display none / block：

- with scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

- without scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

使用'position：absolute'更改translate（position）在所有情况下都能正常工作，'display：none'同样不会渲染（只有重绘一些东西）

仅在Chrome 33.0.1726.0中进行测试，因此猜测它在其他浏览器中的工作方式不同

误解了webkit渲染translate3d（有bug）

0 个答案: