变换：旋转（）；在 Firefox 中抛出警告

Question

我正在创建网页，在调试时收到以下警告。

    Unexpected value NaN parsing y1 attribute. markup.js:356:19
    Unexpected value NaN parsing y2 attribute. markup.js:356:19
    Unexpected value NaN parsing x1 attribute. markup.js:356:19
    Unexpected value NaN parsing x2 attribute. markup.js:356:19

奇怪的是，我的 html 文件没有 markup.js 文件。不知道它是什么。我将其缩小到导致这些问题的一个元素：

<div style="transform: rotate(-20deg);">x</div>

不仅如此，每次我将鼠标悬停在检查器中的元素上时，都会出现更多警告。

我使用的是 Firefox 70.0.1（64 位）。 Google Chrome.

好像没有出现这个问题

预期的行为当然是不应该有任何警告。

消息很烦人，我不想关闭警告。谁能告诉我这是怎么回事？

Answer 1

此 markup.js 文件是浏览器内部开发工具的一部分。这不是您的代码负责的事情，也不是您可以修复的事情，更不用说了。

DOM 荧光笔使用一些 svg 元素来呈现页面上的线条和高亮区域。那里的东西正在产生一个 NaN 值，结果证明它对 svg <line> 和 <linearGradient> 属性无效。

每次设置此类无效属性时都会显示此警告，如果您愿意，可以自己触发它：

const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', NaN);

Open Firefox's dev tools to see the warning.

但再一次，您的代码 与此警告无关。您的用户只有在突出显示该元素时才会看到它。也就是说，这不是你想再关心一分钟的事情。

如果您有空闲时间，欢迎您在 mozilla's bugzilla 上提出问题（很惊讶我已经找不到了...）

变换：旋转（）；在 Firefox 中抛出警告

transform: rotate(); throws warnings in firefox

html

javascript

css

firefox

css-transforms