问题标签 [webkit-transform]

我有一个具有两个半透明背景的 div 动画：

你注意到逗号了吗？这是因为我用

这两个文件都包含 Alpha 通道。

现在，我想在 iPhone 上加速这段代码。因此，我已将 CPU 加载程序替换background-position为-webkit-transform: translate()：

它根本不起作用。但是如果我删除逗号，两个 bkg 层都会同步移动（似乎只有第一个translate()有效），但更平滑。实际上，速度差异太大了，我无法返回background-image。

除了制作两个divs: #animatedBkg1和之外还有其他选择#animatedBkg2吗？

问候，

我有兴趣缩小 100% 宽度的 div。我遇到的问题是，当我将元素按比例缩小时，它会得到一个固定的宽度，并且不再延伸 100% 的宽度。

示例 - http://jsfiddle.net/Fz7qh/2/

当我使用 CSS 缩放属性（而不是变换：缩放）时，它按预期工作，但我听说缩放属性没有得到很好的支持。我的问题是这可以通过 CSS 转换比例来实现吗？

我正在尝试使用以下代码通过 jQuery 旋转 div （标签）：

但是我遇到了显示问题，没有完全显示。这是 jsfiddle 上的代码：http: //jsfiddle.net/4CgPD/

仅当我尝试通过 jQuery 旋转文章时才会出现此问题。如果我为它分配一个带有 -webkit-transform..rotate... 的 css 类，那么它可以正常工作。

问题出现在 chrome 中，它在 Firefox 中运行良好。

我有以下 HTML 结构

以下 CSS 应用于它：

使用 CSS3 动画我想平移/缩放一个非常大的 svg 图形。它正在工作......有点。我在 iPad 上发现了一个问题，当将 translate3d 的 y 值设置为低于 ~ 16500px 时，图形不再显示（在 Safari 或 Chrome 中它工作得很好）。我认为在移动 Safari 上渲染 SVG 的高度/宽度可能存在限制，但是从 #graphic 容器中删除溢出：隐藏让我可以一直向下滚动并且它显示的所有内容都正确。

有没有人听说过或经历过类似的限制/我是否必须设置一些 CSS 值才能使整个想法生效？任何帮助深表感谢。

首先，我从http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/获得了这个很棒的 3D 立方体的代码

我想要做的是在每个面上添加一些带有悬停状态的 div。到目前为止，它似乎大部分都在工作，但是，某些旋转状态会导致悬停状态在 Chrome 中失败（在 Mozilla 中工作正常）。这是我到目前为止所拥有的：http: //jsfiddle.net/BUbeQ/1/

重现问题的最简单的箭头键操作：Down-Right 或 Down-Left-Left（注意：确保首先单击结果窗口内的任意位置，否则箭头键将不起作用）

任何有关如何使悬停状态始终有效的帮助将不胜感激。

干杯

嗨，我有一个正在使用的全屏滑块 RoyalSlider。我有一个带有一些图像的页面，我想要实现的是，当您单击全屏按钮时，全屏 div 从顶部向下滑动，覆盖整个页面，滑块通过 Jquery 加载到该 div 中。

这就是我试图实现这一目标的方式。我有一个 div，我为它做了两个类：

我正在交换类并希望 webkit 转换来做动画，尽管这根本不起作用。出于某种原因，它不会从顶部向下滑动并覆盖整个页面，它只是将页面向上滚动到 div 向下移动大约一个屏幕高度的顶部，但不会覆盖整个页面。

http://www.klossal.com/portfolio/index_current_alt.html 如果你去那里并滚动到大拇指，就在标题为“更多信息”的框上方，你可以点击大拇指旁边的全屏按钮并观看它失败居住。所以这是我需要帮助的第一件事。

第二部分加载滑块我还没有尝试过，因为第一部分失败了，但我只是要从这个 html 文档http://www.klossal.com/portfolio/space_fullscreen.html加载滑块 到那个 div 中使用此 jquery 向下滑动：

我认为这会起作用，因为我在我网站的另一部分设置了这个，它可以工作，但我没有尝试过，唯一我认为会出错的是它会在动画完成之前加载，这很好只要它留在那个动画容器中并且不会自动全屏显示。我实际上使用这种加载方法遇到的另一个问题是控制 loading.gif 的显示位置，有什么方法可以控制它，理想情况下让它位于加载区域的中心？

那里有很多东西，但我认为它已经接近工作了吗？对此的任何帮助都会很棒，谢谢。

所以我知道 translate/translate3d 使用 GPU，但由于某种原因，它会导致大型图形在 iPad 上以块/块的形式呈现。使用翻译时，我很难找到任何说明图像最大宽度/高度的地方。

我希望能够在 transform 属性上使用 css 转换，但由于这个问题不能。即使是“top”属性上的 css 转换，其执行速度也比使用 jQuery.animate() 之类的东西要慢。

对此有何建议？

我无法让 CSS3 2D 变换在 Android 2.3 中与任何使用默认 webkit 引擎的浏览器（例如默认浏览器、Dolphin HD、Amazon Kindle Fire Silk 浏览器等）一起工作。Android 2.3 webkit 引擎确实支持 2D 变换，我已经能够让一些具有 2D 变换的站点正确呈现，但不是我的站点！

有谁知道 Android 2.3 中可能导致与 2D 转换发生冲突的任何问题？或者，有没有一种好方法可以只针对使用 Android 2.3 webkit 渲染引擎的浏览器的 css？当我使用 Modernizr 时，在这种情况下它不起作用，因为 Android 2.3 浏览器对 2D 转换测试呈阳性。

这是我的网站：http: //StevenGerner.com。在首页上，我将两个元素旋转 -90 度（站点标题和一个 h2 元素），并且两者都不会在 android 2.3 浏览器上旋转。我什至尝试过其他 css 转换，但似乎没有任何转换。如果我将整个页面剥离为基本页面，那么转换工作完美无缺，所以我的网站上可能还有其他冲突，我就是不知道是什么！这是特定于转换的 CSS：

该问题也可能适用于 Android 2.2；但是，我目前没有要测试的 2.2 设备。

我真的很感激任何想法、建议和建议！这让我发疯！

我正在为手机开发一个网络应用程序。该应用程序由多个滑动面板（水平）组成，每个面板上都有可点击的元素。我正在使用 touchstart、touchmove、touchend 事件来捕获触摸事件，并使用“-webkit-transform: translate3d”来实际移动元素（使用 Brad Birdsall 的 swipe.js 进行水平滑动 - https://github.com/bradbirdsall/Swipe）。我还在前面板中添加了渐变幻灯片。使用 css 滑动和淡入淡出的动画图像：

添加几个这样的效果后，应用程序现在无法正确加载超过 50% 的时间。当浏览器加载时，屏幕上的不同位置会随机出现黑色矩形闪烁（有关示例，请参见随附的屏幕截图）。有时它们会闪烁几秒钟然后消失，但有时它们会继续四处移动，导致所有动画变得非常缓慢和紧张。

这是我所看到的示例屏幕截图。方块在屏幕上不断移动：

这个问题实际上只发生在三星galaxy android手机上，在默认的android浏览器上（chrome工作得很好，但我需要它在默认浏览器中工作）。一切都在 iphone 上运行良好，并且在我迄今为止测试的所有其他机器人上运行良好。在三星上 - 有时一切都正确加载，但大多数时候都没有。我尝试摆脱一些动画，但问题是如此不一致。如果我在不更改代码的情况下不断刷新，我一定会在某个时候看到它。

以前有人遇到过这个问题吗？我制作了一个简化版的应用程序，只有 2 个滑动面板和前面板上的幻灯片。代码在 github 上： https ://github.com/mashabelyi/css-transitions-test 。您可以在手机上访问 www.webitap.com/test 上的应用程序

黑色矩形在这个简化版本中出现的频率较低，这让我认为它与正在加载的内容量有关。有时它们在开始时出现，然后消失。我正在对元素进行大量 javascript DOM 操作，以确保应用程序适合任何屏幕尺寸。这可能是问题的潜在原因吗？我尝试使用 translateX 而不是 translate3d 并通过调用 translate3d(0,0,0) 触发一次硬件加速，但问题仍然存在。

任何见解将不胜感激！

我在已翻译的垂直滚动 div 中输入文本时遇到问题。

在 webkit 浏览器中，查看这个简化的示例：

http://jsfiddle.net/ZbguJ/3/

滚动到 div 的底部，单击文本框，然后按键盘按钮。div 向上滚动到顶部，并且不显示焦点输入。预期的行为是 div 不应该滚动，并且用户可以继续不受阻碍地输入文本。

就好像浏览器正在确定 div 应该滚动到哪里而不考虑翻译。

任何可能的解决方法？

在实际应用中，有问题的元素使用 translate 来在屏幕上设置动画。用 'top' 属性上的 CSS 动画替换 translate 会严重影响动画的平滑度，但可以解决滚动问题。