问题标签 [translate3d]

根据 IE 10 支持的技术，我想要完成的工作应该可以工作，但我无法弄清楚发生了什么。在 firefox 和 chrome 中，它的工作方式与它应该的一样，但在 IE10 中，它的渲染不正确。

我已经用尽了 IE 的支持文档，就像我说的那样，这应该可以工作。

这是 JS Fiddle [JSFiddle]：http: //jsfiddle.net/qzDV3/1/

有什么建议么？

我正在使用 CSS 转换 3D 和缩放 3D 作为响应式导航菜单。在触摸设备上，更具体地说，iPhone，它会导致同一页面上的单独 jQuery 动画执行缓慢，几乎就像动画时频闪一样。任何人都可以阐明这个问题吗？

如果有任何相关性，我正在使用 SASS：

下面是运行缓慢的 jQuery 片段：

提前感谢您的时间！

作为一个更大的自我项目的一部分，我整天都在研究这个问题，但遇到了一个小问题：http: //jsfiddle.net/GYv22/2/

我正在尝试使用更快/更慢的按钮来改变球的速度。这用于删除当前的 CSS 动画样式（以旧速度），但是我发现它在不这样做的情况下按预期工作，现在只是附加一个新样式（以新速度），动画使用使用 translate3d 属性的关键帧. 不确定这是否是最好的方法，但我认为它比使用类更适合，因为我不断地动态改变动画速度。

这在 Firefox 中按预期工作（虽然有点紧张，但速度变化是实时的，即当你点击按钮时球变得更快/更慢！），在 Chrome 中我必须离开标签并返回查看速度变化（ ???)，并且在 IE 10 中，球动画有效，但根本没有速度变化，即使在离开/返回选项卡或实时时也是如此。

我认为问题在于动画样式被附加到#horizo​​ntal，并且我还希望它影响其子元素#ball。这对于我要添加的未来样式更改是必要的，因为我希望其他元素以相同的速度在球旁边移动，所有元素都在“水平”内移动。但是，似乎子元素没有被更新属性，例如，直到我离开选项卡并返回。在 chrome 中，如果我使用“检查元素”直接检查球，则将鼠标悬停在#ball 的代码上时出现的 div 轮廓将独立于屏幕上的球移动！

有任何想法吗？我是使用 jQuery 的新手，这真的很令人沮丧：>

编辑：我认为这是默认情况下 translate3d 和 Chrome 不使用 GPU 的问题，设置在 about:flags 中。我将测试并发布更新。

编辑：更新：http: //jsfiddle.net/GYv22/3/

在 Chrome 上使用带有translate而不是translate3d的 -webkit 似乎可以工作。这是一种耻辱，感觉就像一个相当老套的方法，因为我遵循的教程推荐了 translate3d 以获得 GPU 功能。

我尝试在 Chrome 上的 about:flags 上启用 GPU 设置，但这也没有解决我的问题。至少这似乎是一个临时的解决方法。我还在这里找到了一个关于直接从子元素添加/删除动画的解决方案，以防万一这对其他人有用：webkit translate3d issues (peek-thru)但我不确定如何为我的重复动画实现它.

在 safari 6.0.4 http://jsfiddle.net/xcrUc/19/中使用transform: translate3d会导致灰度错误。在 Safari 中将图像渲染为灰度的另一种方法是什么，或者如何在不更改属性的情况下修复该错误？当我尝试在 safari 中对 yandex 地图进行灰度化时，就会发生这种情况。transform

我在这里有一个小提琴：jsfiddle.net/VnGRL/

在小提琴中，update()它改变了 CSS.scroll以人为地滚动整个元素。这工作正常：

但是，一旦我使用.animate()什么都不会发生：

这里有一个类似的问题，但这只是他们没有包括的地方px

例如，有 2 个 div 的绝对定位，可以通过将第一个 div 的 z-index 设置为高于第二个的 z-index 将第一个 div 放在第二个上。我们可以使用 translateZ() 或 translate3d 实现这种行为吗？

我在 phonegap 上使用 CSS 转换时遇到了一些麻烦。我们正在转换一个 transform: translate3d 属性以使内容视图滑入和滑出视图，以及滑动以显示侧边栏。

这是 webapp 的一个示例（注意转换在浏览器中工作）：http: //ferriesapp.ca/app/

您将看到转换在手机和台式机上的浏览器中都能完美运行。但是只要我“phonegap”它，过渡就不会呈现。最终位置显示出来，例如，如果我点击离开列表项，它将显示相应的到达列表项。但由于某种原因，动画不会发生在电话间隙上。唯一的例外是通过 phonegap 时它可以在 iOS7 上运行，但不能在 iOS 6 或任何版本的 Android 上运行。

下面是一小段代码：

这是滑动元素上的 CSS 的样子

这是动画类：

最后是调用它的 JS（注意这不是整个函数）：

如果有人有任何建议，他们将不胜感激

谢谢！

PS 我知道有一个 CSS3 @keyframes 规则效果很好，但为了代码的简单性，我宁愿避免这种情况

在分析不同 CSS 动画类型的 jQuery 鼠标事件时，我注意到 translate3d 导致悬停和其他事件无法正确触发。

在一个基本示例中，我正在为从右到左的块列表设置动画。

在翻转时，我将悬停的 LI 背景设置为绿色。

注意：测试是为 webkit 构建的

HTML

CSS

jQuery

正如您在随附的小提琴中看到的那样， translate3d 显示非常不稳定的 jQuery 悬停，而 translate 可以。

有人知道这是为什么吗？

http://jsfiddle.net/jkusachi/j2PSw/2/

我正在为 iOS 设备开发一个项目，当用户拖动它时，我正在使用 translate3d 在页面周围移动一个对象。

使用 Chrome（甚至 Safari）查看时，您可以看到该框非常流畅地移动，但在 iPhone 或 iPad 上查看时，该框根本无法流畅地移动。在 iOS 上使用带有 translate3d 的 CSS 过渡时，过渡非常平滑，所以我不明白为什么会这样。有没有办法来解决这个问题？

这是我的javascript：（JSFiddle：http: //jsfiddle.net/Ls4uc/10/）

http://jsfiddle.net/ad8dQ/13/

这是网址。

如您所见，它适用于 Firefox，但不适用于 Chrome。

如果我添加translate3d(0,0,0)到一个固定的元素，那么我可以很容易地让一个元素重叠它。（例如，那个红色的 div 很高兴地越过了固定的 div。）但是，如果该元素包含另一个具有固定背景图像的元素，则该图像在 Chrome 中消失。

（请参阅 firefox 了解它应该如何工作。）

让我补充一点，如果我没有固定背景图像的附件，那么问题就会消失，但我确实需要固定背景图像。