1

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

所以例如我有一个块：

#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 的固定位置，因为坐标系（实际上我并不完全理解它是如何工作的.. :( ），我阅读了关于 chromium/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

更改显示无/块：

- 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 中测试，所以猜测它在其他浏览器中的工作方式不同

4

0 回答 0