问题标签 [webkit-transform]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
webkit - 如何在 C/C++ 中扩展 webkit
我想学习如何通过向基于 webkit 的浏览器添加一些插件来扩展 JavaScript 功能。
我可以从哪里开始的任何链接或教程。
我查看了 http://rvr.typepad.com/wind/2011/10/webkit-extending-javascript-1.html
但它使用 GTK+,我正在寻找 C/C++ 中的 webkit 增强功能
webkit - 使用 -webkit-transform: scale(...) 时不需要的左边距
我正在使用 wkhtmltopdf(它使用 Webkit 渲染引擎)将 HTML 文件转换为 PDF 文档。生成的 PDF 为 A4。换句话说,它们具有固定的尺寸,因此具有有限的宽度。
我的 PDF 中的一张表格包含图像,这些图像以类似拼图的方式错综复杂地拼凑在一起,有时会占用很多空间。
为了适应 A4 PDF 的约束中产生的难题,我正在应用 CSS 属性 -webkit-transform: scale(...);
这很好地缩放了拼图,它仍然清晰易读,但由于某种原因,它也将包含拼图的桌子推到了右边。尽管我明确地将其左边距设置为 0,但它似乎在拼图表的左侧增加了一个显着的边距。
有趣的是,我的 webkit 转换中的规模越小,左侧的边距越大。因此,例如,如果我使用 scale(0.75),则生成的左边距约为 200 像素。如果我使用 scale(0.5) ,则生成的左边距约为 400 像素。
我尝试使用绝对、固定和相对定位将拼图表向左对齐:0。我还尝试将其浮动到左侧,并将其粘贴在文本对齐设置为左侧的容器中。这些技术都不起作用。
这个左边距来自哪里以及如何删除它/解决它的任何想法?
google-chrome - css3多重3d旋转
我想将一个立方体的一个面旋转两次,并让那个面在一侧平放。
这是关于我要实现的目标的说明:http:
//i.imgur.com/00yAQ.png
我现在把我所拥有的东西放在这里,注意我使用 45 度来显示我的进度,因为 90 度隐藏了形状。 http://jsfiddle.net/s6jwC/1/
谢谢!
jquery - 应用 -webkit-transform 时 div 元素闪烁(仅转换后的元素)
我有一个非常奇怪的问题:
我有一个像这样的 DIV 结构来在网站上显示一些产品:
好吧,你可以看到一个aprox。我的代码的副本。我使用 webkit-transform 为 PRODUCT_OVERLAY 设置动画,因此它在悬停时完全覆盖了产品。发生的情况是,就在启动运动和终止运动时,悬停后的所有产品都会闪烁(消失和出现)几毫秒。
更奇怪的是,只有当我有 3 个或更多页面时才会发生这种情况(我水平移动 WIDE_CONTAINER 以切换页面,就像在轮播中一样)。
我想这可能是由于很多事情造成的,因为它的结构有点复杂,但事实上它只发生在产品被悬停之后并且从来没有当有 1 或 2 页时让我觉得有些东西我没有看...
这是 3 页案例的 JSFIDDLE(发生问题的地方):
这里是 2 页 cas(我只更改了 HTML,删除了一页):
顺便说一句,我只是注意到这只发生在 Safari(webkit)中而不是谷歌浏览器(也是 webkit)中......
提前致谢!
css-transitions - 使用 -webkit-transform translate3d 的硬件加速 css3 动画在三星 Galaxy Tab 10.1 上不起作用
使用硬件加速 CSS3 标签的动画(参见下面的代码)在三星 Galaxy SIII 上的 Google Chrome PC 浏览器和 Android 浏览器中运行良好。但是,在三星 Galaxy Tab 10.1 上的 Android 浏览器上也不起作用。如何在三星 Galaxy Tab 设备上实现硬件加速滑入/滑出动画?
亲切的问候,Vinaya
ipad - webkit 变换比例使项目消失
我正在尝试在我的 HTML 页面中缩放一个 div。这个 div 包含很多画布元素和其他 div 元素。基本上,这个 div 充当页面中所有其他项目的容器。使用 Chrome "23.0.1271.95 m" 和 IOS6.0 safari,缩放后不会出现此 div 右侧和底部的项目。如果我调整窗口大小(或更改 iPad 上的方向),则 div 会正确缩放并且项目开始出现,但在一定大小后再次消失。
这曾经在 IOS 5.0 和以前的 chrome/safari 版本中正常工作。这是最新的 webkit 版本中的错误吗?另外,是否有任何解决方法可以避免这种行为?
webkit-transform - webkit-transform rotate 属性在每个单词后显示黑色伪影
我正在尝试在 .mobi 文件中使用 webkits 转换旋转属性来获取亚马逊的电子书。当我在 css 中使用该属性时,它会在每个单词的右下角显示非常小的但明显的黑色伪影。这就像句末的句号,但不那么干净。如果我不得不这样解释的话,它看起来就像你的相机镜头上的小灰尘颗粒。这个问题是“仅”在第一代 Kindle Fire 上显示,而不是 Kindle Fire HD 8.9”,看起来很棒。浏览器也没有显示这种行为。我什至用其他字体尝试过,所以我知道它不是字体.删除transform属性后它就消失了,这很明显。我还需要添加什么吗?主要是它在KF HD上不显示。也许是' HD 的结果是双屏 ppi 吗?所以也许它仍然存在,但你只是看不到它?任何指针和建议将不胜感激。
jquery - jQuery 可拖动和 -webkit-transform: scale();
我有一种情况,里面div
有可拖动的项目。但是,当div
使用 缩放父级时-webkit-transform
,draggable 显然会停止正常工作。
我在这里重现了这个场景。
如您所见,可拖动项相对于文档移动,即使父项的比例完全不同。
我将比例(1.5
在示例中)作为 JS 中的变量,所以我可以使用它,但是在哪里呢?我需要将拖动距离除以比例,对吗?我在哪里可以做到这一点?
编辑:我尝试将函数设置为drag
-event,但无法弄清楚如何实际更改拖动距离。
Edit2:我挖掘了 jQuery UI 源,似乎没有办法从事件中做到这一点drag
:
如您所见,回调函数的返回值没有以任何方式存储。回调触发后,元素的位置会更改,因此更改回调中的 CSS 不起作用。
您可以通过使用此字符串的浏览器内搜索在此处查看相关代码:
javascript - Webkit:根据窗口大小调整 div 和 div 内元素的大小
我有div
一个包含文本的元素,我在用它缩放内部文本时尝试调整其大小。
webkit-transform: scale( blah, blah )
CSS 属性非常适合按特定因子缩放 div,但我需要它与窗口大小成比例缩放。
有谁知道有什么方法可以做到这一点?
google-chrome - 使用 GPU 加速优化渲染 Webkit
我开发了一个小应用程序来测试 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 过渡更好:(。