问题标签 [webkit-transform]

当触发 CSS 动画并且使用 CSS 将对象定位为static( relative、absolute等) 以外的任何内容时，对象内的文本在动画期间突然变得非常细。然后它会恢复到全宽。

尝试在 Safari 中运行此页面：http: //pastehtml.com/view/bjgaloxjj.html（为澄清而更新）

请注意，当#contentdiv 没有绝对或相对定位时，问题就会消失。这适用于 iPad 网络应用程序，在设备上比在桌面上更明显。

关于是什么导致这种干扰的任何想法？

编辑澄清：webkit-transform并且webkit-transition必须使用，因为它们是硬件加速的，这会导致更流畅的动画。

我将以下 CSS 转换应用于 HTML 输入框。

当我在输入框中键入文本直到它填满可见区域时，插入符号继续越过输入的边缘并被隐藏。通常，插入符号和文本会在您键入时滚动。

一旦插入符号达到预缩放输入的宽度，文本最终会开始滚动。在计算何时滚动文本时，浏览器似乎忽略了缩放。

这只是 WebKit 浏览器的问题（在 Chrome 和 iPad 上测试过）。-moz-transform 等效项在 FireFox 中运行良好。zoom 属性在 webkit 中运行良好，但在 iPad 上缩放时不够平滑，所以我不能真正将它用于我的项目。

你可以在这里看到一个例子：http: //jsfiddle.net/4Kv6w/

第一个输入框带有 -webkit-transform 缩放。第二个框是缩放设置。第三个是正常的。

任何帮助将不胜感激。

编辑- 通过使用 -webkit-transform 将输入框移动到左侧，您也可以在不缩放的情况下解决问题。这是一个例子：http: //jsfiddle.net/4Kv6w/15/

我正在使用 aUIWebView在我的 iPhone 应用程序中呈现 HTML5 内容。

HTML5 涉及很少的 Webkit Transform 动画。

我的问题是，iOS 4.x 中的动画很流畅，但是当我在 iOS 5（iPhone 和 iPad）中测试相同的动画时，动画似乎很慢。

顺便说一句，当我在 iOS 5 的 Mobile Safari 中加载相同的 HTML 内容时，它似乎工作得更好。

对此有什么想法吗？这可能是因为UIWebViewiOS 5 中没有 Nitro (JavaScript JIT) 支持吗？中是否有属性/方法UIWebView，我需要在 iOS5 中手动设置以增强动画效果？

我想检索已应用 CSS3 转换的 div 的大小。

因此，实际上我已将元素设为其原始大小的 30%。但是，当我查询元素宽度/高度时，它会在应用转换之前报告元素的大小。

我知道这实际上是正确的行为，并且元素实际上并没有改变大小，但它的内容会改变。但是，以及我在这里询问的原因，如果我右键单击元素并从弹出菜单中选择“检查元素”（我刚刚在 Mac 上使用 Safari），则元素会突出显示并且呈现的大小显示在附加到元素的浏览器工具提示中。

所以，这表明浏览器“知道”渲染的大小，但我还没有找到访问这些信息的方法。谁能帮我？

我有一个 div，其中包含 6 个应用了不同 webkit transromations 的画布，我想将此 div 的内容“绘制”到一个画布中（“截取”此 div 的屏幕截图）。但似乎它会有点棘手，因为没有办法将 div 直接绘制到画布中，并且当我尝试将转换后的画布绘制到另一个画布时，不会应用 webkit 转换。

是否可以使用画布转换（缩放、平移等）正确绘制这些画布？是否有任何好的库可以帮助您将 3d 转换转换为 2d？提前致谢。

我正在尝试根据窗口大小缩放 iframe。通过 iframe 是一个 1600px x 900px 的 html5 游戏

我已经使用下面的脚本来扩展游戏，所以我知道可以做很多事情。虽然下面的代码将游戏渲染成一个小盒子，但有什么办法可以让它缩放以适应窗口，同时保持 16:9 的纵横比？

作为参考，我是一名游戏艺术家，仅将代码（javascript/css/html）用于任务对话和其他较小的游戏功能。我目前是该项目的最后一个工作人员，并且要求将此功能实现到游戏中。

任何帮助将不胜感激！

当我将 WebKit 转换更改应用于 dom 样式 attr 时，例如：

更改自：

到：

这种渲染更改硬件加速了吗？当然，如果浏览器支持它。

更新：我设置了一个小提琴，它似乎工作正常 - 第一次滑入的部分包含谷歌地图 - 我想知道这是否真的是问题......

我最近在我正在开发的 HTML5 应用程序中添加了一个 -webkit-transform 卡片翻转功能。这具有使水平移动的简单旋转木马表现出一些奇怪行为的不幸效果。

我的轮播结构是这样的

我的 jQuery .click() 循环通过它的行为是这样的：

$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);

这绝对没问题，直到我为卡片翻转添加 -webkit-transform CSS：

现在我的卡在我使用时可以正常翻转

我的旋转木马仍然可以工作，但似乎卡住了 - 例如，它会部分滑出，并保持卡在原位，直到我以某种方式与 div 交互，之后它会卡入正确的位置。

问题似乎是

当我从 CSS 中删除它们时，轮播可以正常工作，但翻转不能。

我在 Safari 和 Chrome 上都进行了测试，结果是一样的。任何想法将不胜感激。

我正在使用动画元素-webkit-transform: translate3d(x,y,z)和立方贝泽计时功能与 iPhone 的触摸事件相结合，以制作自定义滚动方法类型的东西。

麻烦的是，如果元素（在本例中为页面 div）超过一定大小，动画会卡顿（元素停止半秒）。如果我有 320 像素的宽度和 1000 像素的高度，这一切都很好，但如果我将高度设为 2000 像素，我会遇到令人讨厌的口吃。请注意，它在开始时只会断断续续一次，几乎就像它正在加载一样，然后就很好了。

是否有任何已知的解决方法？

我目前正在一个新项目中使用 Twitter Bootstrap。该项目的主要部分是一个缩略图库，就像他们在示例中所拥有的一样（这里：http: //twitter.github.com/bootstrap/components.html#thumbnails）。

问题是我目前正在根据 EXIF 方向数据在需要时对图像进行 css 转换（基本上是旋转）。当我将转换（现在使用 -webkit-transform，因为我正在 Chrome 上测试）应用到 animg时，它的父元素保持不变，并且图像“溢出”它的容器。

使用 Chrome，可以测试此行为，转到我之前链接的示例缩略图库，检查其中一个占位符图像并向标签添加style="-webkit-transform: rotate(90deg)属性。img图像溢出li容器元素并破坏布局。

有没有办法解决这个问题并让引导程序将 css-rotated 图像视为原来的方式？我想过手动设置标签的高度和宽度img，他们的父母会调整，但我不知道在实际渲染之前，图像将在服务器端渲染什么尺寸，所以这似乎排除了这一点方法。

哦，顺便说一句，我知道我可以求助于在服务器端旋转，我知道这并不难，我只是非常喜欢在浏览器中进行，如果可能的话。

有任何想法吗？

谢谢！

编辑： Jaap 建议我旋转整个容器，如果不是因为我在 thumbnail lis 中有文本节点，这将非常有效。旋转容器将使文本显示也旋转。