transform：rotate（）在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中没有出现。

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

这些消息非常烦人，我不想关闭警告。有人能告诉我这里发生了什么吗？

- loadingnow

---

我认为这与转换无关，肯定是其他原因。 - Temani Afif

那个<div>上是否有任何订阅的监听器？文件markup.js是做什么的？ - Andrew

看看 markup.js 文件中的这些行，查看问题在哪里。 - לבני מלכה

@לבנימלכה 我已经编辑了问题，添加了一个代码片段。您可以使用它来查看markup.js是什么。 - loadingnow

@TemaniAfif 这确实与转换有关。使用添加的代码片段，您可以自行查看。 - loadingnow

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的Bugzilla上开一个问题（我很惊讶居然找不到一个...）

- Kaiido