问题标签 [webkit-transform]

我想学习如何通过向基于 webkit 的浏览器添加一些插件来扩展 JavaScript 功能。

我可以从哪里开始的任何链接或教程。

我查看了 http://rvr.typepad.com/wind/2011/10/webkit-extending-javascript-1.html

但它使用 GTK+，我正在寻找 C/C++ 中的 webkit 增强功能

我正在使用 wkhtmltopdf（它使用 Webkit 渲染引擎）将 HTML 文件转换为 PDF 文档。生成的 PDF 为 A4。换句话说，它们具有固定的尺寸，因此具有有限的宽度。

我的 PDF 中的一张表格包含图像，这些图像以类似拼图的方式错综复杂地拼凑在一起，有时会占用很多空间。

为了适应 A4 PDF 的约束中产生的难题，我正在应用 CSS 属性 -webkit-transform: scale(...);

这很好地缩放了拼图，它仍然清晰易读，但由于某种原因，它也将包含拼图的桌子推到了右边。尽管我明确地将其左边距设置为 0，但它似乎在拼图表的左侧增加了一个显着的边距。

有趣的是，我的 webkit 转换中的规模越小，左侧的边距越大。因此，例如，如果我使用 scale(0.75)，则生成的左边距约为 200 像素。如果我使用 scale(0.5) ，则生成的左边距约为 400 像素。

我尝试使用绝对、固定和相对定位将拼图表向左对齐：0。我还尝试将其浮动到左侧，并将其粘贴在文本对齐设置为左侧的容器中。这些技术都不起作用。

这个左边距来自哪里以及如何删除它/解决它的任何想法？

我想将一个立方体的一个面旋转两次，并让那个面在一侧平放。

这是关于我要实现的目标的说明：http:
//i.imgur.com/00yAQ.png

我现在把我所拥有的东西放在这里，注意我使用 45 度来显示我的进度，因为 90 度隐藏了形状。 http://jsfiddle.net/s6jwC/1/

谢谢！

我有一个非常奇怪的问题：

我有一个像这样的 DIV 结构来在网站上显示一些产品：

好吧，你可以看到一个aprox。我的代码的副本。我使用 webkit-transform 为 PRODUCT_OVERLAY 设置动画，因此它在悬停时完全覆盖了产品。发生的情况是，就在启动运动和终止运动时，悬停后​​的所有产品都会闪烁（消失和出现）几毫秒。

更奇怪的是，只有当我有 3 个或更多页面时才会发生这种情况（我水平移动 WIDE_CONTAINER 以切换页面，就像在轮播中一样）。

我想这可能是由于很多事情造成的，因为它的结构有点复杂，但事实上它只发生在产品被悬停之后并且从来没有当有 1 或 2 页时让我觉得有些东西我没有看...

这是 3 页案例的 JSFIDDLE（发生问题的地方）：

http://jsfiddle.net/BVV24/1/

这里是 2 页 cas（我只更改了 HTML，删除了一页）：

http://jsfiddle.net/BVV24/2/

顺便说一句，我只是注意到这只发生在 Safari（webkit）中而不是谷歌浏览器（也是 webkit）中......

提前致谢！

使用硬件加速 CSS3 标签的动画（参见下面的代码）在三星 Galaxy SIII 上的 Google Chrome PC 浏览器和 Android 浏览器中运行良好。但是，在三星 Galaxy Tab 10.1 上的 Android 浏览器上也不起作用。如何在三星 Galaxy Tab 设备上实现硬件加速滑入/滑出动画？

亲切的问候，Vinaya

我正在尝试在我的 HTML 页面中缩放一个 div。这个 div 包含很多画布元素和其他 div 元素。基本上，这个 div 充当页面中所有其他项目的容器。使用 Chrome "23.0.1271.95 m" 和 IOS6.0 safari，缩放后不会出现此 div 右侧和底部的项目。如果我调整窗口大小（或更改 iPad 上的方向），则 div 会正确缩放并且项目开始出现，但在一定大小后再次消失。

这曾经在 IOS 5.0 和以前的 chrome/safari 版本中正常工作。这是最新的 webkit 版本中的错误吗？另外，是否有任何解决方法可以避免这种行为？

我正在尝试在 .mobi 文件中使用 webkits 转换旋转属性来获取亚马逊的电子书。当我在 css 中使用该属性时，它会在每个单词的右下角显示非常小的但明显的黑色伪影。这就像句末的句号，但不那么干净。如果我不得不这样解释的话，它看起来就像你的相机镜头上的小灰尘颗粒。这个问题是“仅”在第一代 Kindle Fire 上显示，而不是 Kindle Fire HD 8.9”，看起来很棒。浏览器也没有显示这种行为。我什至用其他字体尝试过，所以我知道它不是字体.删除transform属性后它就消失了，这很明显。我还需要添加什么吗？主要是它在KF HD上不显示。也许是' HD 的结果是双屏 ppi 吗？所以也许它仍然存在，但你只是看不到它？任何指针和建议将不胜感激。

我有一种情况，里面div有可拖动的项目。但是，当div使用 缩放父级时-webkit-transform，draggable 显然会停止正常工作。

我在这里重现了这个场景。

如您所见，可拖动项相对于文档移动，即使父项的比例完全不同。

我将比例（1.5在示例中）作为 JS 中的变量，所以我可以使用它，但是在哪里呢？我需要将拖动距离除以比例，对吗？我在哪里可以做到这一点？

编辑：我尝试将函数设置为drag-event，但无法弄清楚如何实际更改拖动距离。

Edit2：我挖掘了 jQuery UI 源，似乎没有办法从事件中做到这一点drag：

如您所见，回调函数的返回值没有以任何方式存储。回调触发后，元素的位置会更改，因此更改回调中的 CSS 不起作用。

您可以通过使用此字符串的浏览器内搜索在此处查看相关代码：

我有div一个包含文本的元素，我在用它缩放内部文本时尝试调整其大小。

webkit-transform: scale( blah, blah )CSS 属性非常适合按特定因子缩放 div，但我需要它与窗口大小成比例缩放。

有谁知道有什么方法可以做到这一点？

我开发了一个小应用程序来测试 CSS3 和 translate3d。这个想法是渲染几个在屏幕上随机移动的 DIV。这是一种粒子系统，我知道我可以使用 WebGL 或 Canvas 来获得更好的性能，但我也希望它在移动浏览器上顺利运行，因此我认为 DOM 操作会更好地提高性能。

几个小时后，您将在此网址找到结果

我想达到最佳性能以增加 DIV 的数量。

但这是我的问题，我在 Chrome 或 Safari 上使用 TimeLine 时发现了一个“渲染问题”。有时整个页面会在 Safari iPhone 或 Chrome Android+iPhone 上呈现出轻微的延迟。

因此，如果你们中的一个人准备好迎接挑战，请不要犹豫，我尝试了很多东西，但我不知道如何避免这种昂贵的重绘。

顺便说一句，如果你们中的一个人有优化此片段的额外想法，请不要犹豫回复。

谢谢

---------- 更新 1 ----------

根据 Ariya 的建议，我通过代码（url）更新并仅使用顶部/左侧添加了另一个测试。根据 Chrome 提供的 FPS 计数器，我可以看到使用几乎相同帧速率的顶部/左侧属性时 fps 更稳定。您是否知道我是否可以优化 CSS3 版本以获得更好的性能？我虽然带有 GPU 加速的 css3 会更快，但我可能做错了什么。

---------- 更新 2 ----------

我更新了我的代码以使用 requestAnimFrame 并且只在我需要重绘时触发它。我发现导致我在 css 中定义的 perf 灰色渐变背景的原因是经常重绘并影响性能。然而，从纯粹的性能角度来看，上/左似乎仍然比 CSS 过渡更好:(。