问题标签 [prefixfree]

我正在尝试为 div 设置动画。我在动画中实际所做的是将 div 转换为 100%。但动画仅适用于 chrome，不适用于 Firefox。我尝试添加前缀，并且还包括了 prefix-free.js 插件。Caniuse.com 说 Firefox 将支持不带前缀的动画。我在堆栈溢出中看到了很多类似的问题。但他们中的大多数正在使用 Firefox 和其他尚不支持的属性。但我的很简单。我什至尝试删除翻译和背景颜色更改。但它也不起作用。

HTML：

CSS：

演示

我想要实现的是让用户定义要由我编写的 JavaScript 文件处理的特定样式表，这是我用来获取指定样式表的代码：

问题是在第一次页面加载时一切正常，然后在 3 到 5 次刷新targetSheets返回空值数组后，这显然会破坏之后所做的一切，然后在再次刷新后我得到预期值等等。我尝试了所有浏览器，清除了我的缓存，同样的事情一次又一次地发生。这是我在控制台中得到的图像：

https://www.dropbox.com/s/ipnc20hcdr3d6wl/01.png?dl=0

我使用 wamp 服务器和所有浏览器的最新版本在线和本地测试了我的代码。那么是什么导致了这个问题，我该如何解决呢？

谢谢你的时间。

编辑

我找到了答案，这是因为实现了无前缀插件，该插件删除了链接节点，然后将处理后的 css 重新插入到样式标签中。

It's a bug of google chrome or there are some guidelines which i should stick to, to return that feature?

Thank you.

UPDATED Issue was caused by prefixfree.

我正在动态加载一个 iframe，其中包含一些要在其中执行的代码——它是一个代码游乐场，下面有 codemirror 实例。在 iframe 内部执行的代码之一是来自 Lea Verou 的 prefixfree.min.js。

在 iframe 的加载/卸载时，我收到以下错误：

这个错误是什么意思？

我最初的问题在这里得到了回答：Google Fonts give: No 'Access-Control-Allow-Origin' header is present on the requested resource。

有没有办法将 data-noprefix 属性添加到我的 Google Fonts 链接标签？

我的functions.php 看起来像这样：

我想在悬停在图像上时翻转带有旋转动画的图像（请参见下面的代码）。将鼠标悬停在图像上时，它围绕其 x 轴旋转一秒钟（当鼠标离开图像时返回）。

该动画在 Firefox 和 Safari 中按预期工作。但是，Chrome 有时会跳过动画并立即翻转图像。我不知道如何可靠地重现该问题，因为它通常会在动画被跳过之前工作几次。我录制了一个视频，所以你可以明白我的意思：https ://www.youtube.com/watch?v=bpgi46F_5RU

这个 CSS 有问题吗？我首先怀疑它是由旋转角度引起的，但即使是其他类型的动画也会出现同样的问题。

编辑：正如 TylerH 所评论的，它看起来像 Chrome 中的一个错误。我在 David Walsh 的这个著名教程中看到了同样的问题：http: //davidwalsh.name/css-flip。视频：https ://www.youtube.com/watch?v=o_TViH4AmZ8 。该问题必须与鼠标交互有关，因为图像下方的“切换翻转”按钮可以正常工作。

我正在尝试在图像过滤器上使用“无前缀”（http://leaverou.github.io/prefixfree/），但脚本似乎没有添加 -webkit- 前缀。

这是示例：http ://codepen.io/barkins/pen/ByeGjd

“Prefix free”不应该在样式中添加“-webkit-”吗？所以它看起来像这样：

提前感谢您的任何帮助。

我有一个网页，但在不同的浏览器上看起来不同。甚至我给出的填充和边距的数量也很遥远，我们不要谈论 JS 的东西。我也在这里直播：
https

://iam-shivam.github.io/DrumPad/drumpad.html如何确保它们在所有浏览器上看起来都一样？某种方式来自动化这个或手动提示？
我什至尝试了一个无前缀的脚本，但它似乎没有任何好处。也许我用错了。这是链接： http: //leaverou.github.io/prefixfree/

HTML 文件：

CSS 文件：