问题标签 [translate3d]

我正在使用 PhoneGap 构建一个 iOS 应用程序。我正在使用 translate3d CSS 动画来创建“翻转”效果。

这对更简单的元素很有用……一个带有前/后 div 的 DIV，可能还有一个或两个额外的跨度。

但是当我试图翻转一个更大的元素时……即整个屏幕，我会遇到重绘故障。当我交换 css 类开始转换时会发生什么，“底部”div 的部分弹出“顶部”div，然后翻转发生，然后它们再次弹出。并且它不是通过显示的整个元素......它是沿着我正在执行平移 3d 旋转的轴拆分的元素的一半。

关于可能导致这种情况的任何想法或理论？它在 iPad 上作为应用程序和 Safari 桌面上发生的情况相同，因此似乎是 webkit 问题。

会不会是一些 CSS 问题？或者是试图用大背景图片的复杂嵌套元素进行全屏 translate3d 旋转，这超出了 Safari 的处理能力？

更新 1：

我在缩小问题范围方面取得了进展。

发生的情况是，当我进行 translate3d 翻转时“窥视”的元素恰好是之前通过 translate3d 定位的子元素。

我想用 translate3d 转换的“页面”结构：

这可以自己工作。前面的 div 被替换为具有卡片翻转效果的后面的 div。

问题是在进行整页翻转之前，我已经#front使用 translate3d 为 div 中的一些元素设置了动画：

示例 CSS：

如果--而不是使用 translate3d--我只是用top样式重新定位 div 或转换top属性，我不会得到窥视问题。当然，这意味着我必须分别放弃流畅的动画或硬件加速。

在这一点上，它看起来像一个 webkit 错误。我会继续玩它。如果有人以前遇到过这种情况并找到了解决方法，我会全力以赴！

在下面的场景中，我们看到两个 div 在一个容器中应用了 CSS3 3D 转换。当它们被点击时，两者都应该触发一个事件。在这种情况下，会显示一个警报，指示单击了哪个 div。

现在的问题是，只有第二个 div 显示了所需的行为。单击第一个 div 不会产生如图所示的警报（在最新的 safari、chrome 和 safari iOS 上测试）。

一旦我将负 z 值从 -100px 更改为 0px 或正值，一切正常。

这是浏览器的bug吗？有什么方法可以实现所需的行为？

这有点奇怪。当我-webkit-transform: translate3d(0px, 0px, 0px);在我正在构建的网站上应用图像时，它们最初看起来不错。但是，当我开始滚动浏览器窗口或将浏览器窗口调整到一定大小（大约超过 1200x1024）时，图像都会出现故障，其中包含其他图像或网站的部分图像。全部拉长，剪断。有时甚至会改变颜色等等。这也适用于漂浮在图像上方的 @font-face 文本。我认为这是与 Win7x64/ATI Firepro v5800/Chrome 版本相结合的非常孤立的案例。但是以这种方式构建网站有点烦人:)

任何人都遇到过类似的问题并且知道如何解决它，还是我应该通知谷歌？

As I understand hardware acceleration on iOS devices is enabled when using translate3d(). So why this test on jsperf shows that using css left/top is faster?

我在 Mobile Safari 中发现了一个有线问题作为演示http://mocheng.github.com/demo/translate3d.html

translate.html内有一页translate3d_iframe.html作为 iframe。translate3d_iframe.html中的元素具有样式-webkit-transform: translate3d(0, 0, 0)以强制 3d 加速。

有趣的结果是 3D 元素将始终显示在其他元素的顶部，因为它具有较低的 z-index。

更有趣的是：3D 元素只是显示在其他元素之上。您仍然可以点击菜单项“被 3D 元素隐藏”（点击时会显示警报消息）。

这只能在 Mobile Safari 中重现。

有没有办法解决它？我只是觉得 Web 开发人员必须知道 iOS 浏览器是如何解决此类问题的。

我看到一个问题，Chrome 和其他 WebKit 浏览器会大量模糊任何也应用了 translate3d 的 css 缩放内容。

这是一个 JS Fiddle：http: //jsfiddle.net/5f6Wg/。（在 Chrome 中查看。）

是否有任何已知的解决方法？我在上面的简单示例中得到了这一点，我可以简单地使用 translate 而不是 translate3d - 这里的重点是将代码剥离到最基本的部分。

Mac 上的 Safari 5.1.1 中有一个似乎难以处理的错误。（另外，由 Mac 上的 Firefox 展示。）

使用iScroll设置滚动 DIV，任何由INPUT或TEXTAREA引起的滚动都会使translate3d 矩阵偏移自动滚动量。因此，例如，您可能无法再滚动回顶部！

由于它是不正确的translate3d 矩阵，因此我找不到解决此错误的任何方法。从元素中获得的所有值似乎都是正确的，只是滚动内容的偏移不正确。

另请注意：我确信这不是 iScroll 错误。

欢迎任何想法！如果在其他浏览器中测试，请发表评论。

我正在开发的 Webkit Android 应用程序中的 Input 元素有几个问题。在 2.X 上测试，但是 3.x 似乎没有这些问题...

该应用程序通过为每个“页面”设置单独的 Div 来工作，并且我使用 CSS3 translate3D 在页面之间设置动画。其中一些页面包含 Input 元素。当我点击输入以获得焦点时，我的任何“位置：固定”Div 都会从顶部移动大约 5px，向左移动 5px。现在踢球者......它最终会自行修复，然后当你点击输入时再也不会发生，它只是第一次......

我的另一个问题是，输入元素与键盘很矛盾，例如，拼写更正/自动完成不会输入文本，并且在使用 Swype 键盘时，您不能“滑动”单词，只有每个字母的单独点击才能将文本输入输入元素。

我读过很多这些可能是由 CSS3 Translate3D 引起的。但是，我已经尝试了几乎所有方法来解决这些问题，并且我几乎在每个站点都搜索了解决方案，但无法找到解决方案，或者找到其他有此问题的人......

有没有其他人有这些问题，或者知道修复？

（可能的解决方案？？）任何人都知道一种方法来覆盖 webkit 中 Input 元素的默认行为吗？我想知道我是否可以生成自己的 TextView 并将其放置在这些输入字段上......？

任何帮助是极大的赞赏 ：）

我们正在为 iPad 和 iPhone 开发一个 HTML5 + CSS3 应用程序。该应用程序在 iPad 和所有 iPhone 上运行良好，但是，iPad 2 在启动时显示 html dom 对象像素化，并且保持这种状态，有时总是，有时会持续一段时间。

应用程序专为触摸和手势而设计。我们使用 translate3D 对滚动对象进行硬件加速。我们也在使用 jQuery (v1.7)，但我们设计的滚动条是纯 javascript，没有框架。jQuery 主要用于查找/添加/删除 dom 对象和 ajax。除了 jQuery，其他一切都是内部编写的，包括我们正在使用的 jQuery 插件。

正如我所说，动画是通过 translate3D 实现的。对于滑动效果，我们正在更改 -webkit-transform 的 x 或 y 轴值，当接收到 touchend 事件时，使用 javascript、-webkit-transition 和 translate3D 实现动量动画。在编写应用程序时，Apple 的 iOS Safari 文档被高度用作指南。

尽管该应用程序在 iPad、iPod Touch（第 2 代）、iPhone 3gs 和 iPhone 4 上运行良好，但在 iPad 2 上进行测试时，我们开始看到这个像素化屏幕。最奇怪的是，3d 加速内容是唯一像素化的部分。我附上了两张截图，一张来自 iPad，另一张来自 iPad2。你可以明白我的意思（它们是在同一天的不同时间拍摄的，所以内容不同，对此感到抱歉）。

主要内容（带有图像的框）可以通过触摸事件上下滑动。在 iPad2 上，只有这部分是像素化的。滑动时，像素化大部分时间都保持不变，但在某些测试中，它会在几秒钟后重置。

此外，html 内容在 :

我们通过 CSS 启动硬件加速，主滑动对象有这个属性：

对于闪烁校样，图像不在任何具有背景颜色的 dom 对象内，并且具有以下属性：

为了在某​​些情况下进行更多闪烁校对，我们使用了这个属性（但屏幕截图中的像素化内容没有分配这个属性）：

该应用程序目前没有“apple-touch-startup-image”，所以我们的第一个想法是 ios 制作的启动捕获有点混乱。但事实证明这不是问题，因为通过 wi-fi 下载内容后，像素化保持不变。

如果有人遇到过这个或类似的问题并且能够解决它，请回答，因为我们没有其他想法了。

我试图提供尽可能多的信息，这是我承诺的屏幕截图：

平板电脑：

iPad 2：

我正在尝试使我的主页与 safari iphone/ipad 一起使用。问题是，我想移动嵌入在<div>页面周围标签内的 youtube 视频。通常我使用jquery来做到这一点，我只是<div>用jquery offset方法设置标签的偏移量，一切都很好，但是当我试图用translate3d设置位置时，奇怪的事情发生了正确移动到所需的位置, 但是里面嵌入的 youtube 根本不动，它停留在页面的左上角。

所以基本上看起来我不能用 translate3d 移动视频，不管我做什么。如果我尝试使用 iframe 嵌入 youtube 视频，它会变得更奇怪：一切似乎都工作正常，视频正在移动到正确的位置，但 ZI 无法通过单击播放按钮开始播放视频。