问题标签 [translate3d]

我正在尝试深入研究浏览器渲染，并想出了这个小演示以准备演讲。

我整理了一个动画演示，您可以在其中轻松地将调度从 -based 切换到-basedrequestAnimationFrame并结合甚至完全-based。setIntervaltop/lefttop/lefttranslate3d(0,0,0)translate3d(x,y,z)

现在我知道 stranslate3d不是灵丹妙药，尤其是如果应用于太多元素会变得昂贵。然而，有一件特别的事情引起了我的注意。如果我将positionerfrom切换DefaultPositioner到Translate3dPositioner似乎我得到比以前更长的重新计算样式阶段。我找不到任何相关信息，所以我想知道是否有人可以分享更多关于这里发生的事情的信息？

这是演示的链接：http ://plnkr.co/edit/TKwKBk?p=preview

只需在app.js文件中切换实现。

还有一件事：当您单击恢复开始演示时，您应该稍等片刻，直到所有框都移开一点。我知道这是一个糟糕的演示；-)

我正在尝试链接两个脚本：Onepage scroll 和jQuery Waypoints。问题是 Onepage 滚动使用 translate3d 滚动页面，因此 jQuery Waypoints 失败。如何让它工作？

我想要实现的是一个包含一个 div 的框，该 div 将容器大小加倍并托管两个可用作幻灯片的 div。该按钮只是为包装器的左侧设置动画并创建幻灯片效果。这是html：

整个事情都有效，但动画效果仅在Firefox中可见。没有 webkit 或 chrome 或 ipad .. 只是 firefox。我已经敲了几个小时的头，我想知道我做错了什么。

您可以在此处查看实时示例（查看后更容易解释）：http: //jsfiddle.net/omegaiori/Qys8W/

我怀疑js有问题。你怎么看？

多谢！

我正在使用 Javascript 在 Chrome 中操作 CSS 转换，并且我注意到当translateZ值变得太低（太远）时，元素会消失。这似乎只有在有大量元素时才会发生。

似乎这可能与z-index元素有关。

这是问题的一个例子：http: //jsbin.com/iZAYaRI/26/edit

悬停输出以查看问题。

有谁知道为什么会这样？

更新： 似乎元素实际上并没有消失，而是移动了一千个像素左右。

在过渡期间，我的固定背景有问题。我有 2 个面板，面板 1 有 2 个图像，它们将分别从左到右和从右到左进行动画处理，基本上它只会添加一个“动画”类来触发过渡。在过渡期间，panel-2（具有固定背景和一些文本内容）将以 chrome 闪烁。请现场查看http://jsfiddle.net/7EqaV/embedded/result/

有什么建议吗？提前致谢！..

HTML 代码：

CSS 代码：

JS代码：

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

所以例如我有一个块：

并随机使用另一个块来处理单击事件，该块具有用于#block 的切换类功能并调整大小以在屏幕上获取滚动条

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

这里有一些观察：

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

改变平移位置（可见 -> +50px）：

更改显示无/块：

使用 'position:absolute' 更改 translate(position) 在所有情况下都可以正常工作，'display: none' 同样不会渲染（只有然后重绘某些东西）

仅在 Chrome 33.0.1726.0 中测试，所以猜测它在其他浏览器中的工作方式不同

I'm trying to move an embedded element with the CSS3's transform: translate3d() method. It works perfectly in every browser, except for Safari, which doesn't seem to move the video/audio itself but manages to move the embedded element.

Here's the fiddle.

I've moved a container div to the right with translate3d(). I've also set a border for the div and the embedded element/object.

HTML

CSS

Is this an unfixable bug or does anyone have a fix?

EDIT:

Safari 5.1.7 on Windows 8.1

在谷歌浏览器中，我发现了以下错误：

我有一个固定大小的 div，位置：绝对，并且有一个简单的变换：

-webkit-transform: translate3d(100px, 100px, 0px)

我将 div 的显示从“block”更改为“none”，然后再次更改为“block”，但 div 不再出现。我注意到删除 position: absolute 解决了这个问题，但这肯定是 Chrome 中的一个错误。

使用以下 html 进行测试（带有红色边框的黄色 div 应每 500 毫秒闪烁一次）

请参阅 jsbin 示例以获取演示（注意：仅可在全屏 jsbin 中重现 - 请不要移动鼠标 - http://jsbin.com/UkOJuxO/1 - 如果您想在可编辑的 jsbin 中查看它，该错误不可重现，因为该页面是在 iframe 中呈现的。但只需使用下面的 html 并使用 Chrome 在本地访问该页面，就可以看到该错误很容易重现）

html是下面的那个。如果您从本地 html 页面在 Chrome 中打开它，则该错误很容易重现。但是如果打开开发工具并将鼠标悬停在闪烁的 div 上，它会出现一次。

在所有其他浏览器中，一切正常，没有任何问题。

我有一个带有五个图像的标题。我希望图像在悬停时向上过渡 10 像素，但由于某种原因，它们只是立即向上移动并且不会平稳上升。我正在使用谷歌浏览器。

您可以查找该网站，http ://pannariz.com 。这就是它的样子

我正在学习使用 div、javascript 和 requestAnimationFrame 创建一个简单的动画。动画正在运行，但有一些看起来不正确的视觉问题。这些问题出现在多个浏览器中，尽管我主要使用 Chrome。我用最少的代码创建了一个示例来演示这些问题。我知道 css 动画、webGl 等存在并且可能更好，但想了解为什么这段代码不能按预期工作。

一个问题是沿移动 div 的所有边缘模糊，尤其是前导和尾随。当 div 快速移动时会发生模糊。这是正常和不可避免的吗？在使用其他人编写的代码时，我看到了同样的问题，这可能只意味着我们都犯了同样的错误。我想渲染清晰的图像，而不是模糊的图像。我希望作为一个动画新手，我犯了一个很容易解决的愚蠢错误。

另一个问题是沿移动 div 的后缘偶尔出现的闪烁效果。它们不会出现在每一帧上。根据 Chrome 时间线，帧速率很好。我不知道是什么时候造成的。

示例代码在任何地方都可以运行，但大小适合桌面。