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

【问题标题】：transform: rotate(); throws warnings in firefox变换：旋转（）；在 Firefox 中抛出警告
【发布时间】：2020-03-10 08:38:43
【问题描述】：

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

    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 文件。不知道它是什么。我将其缩小到导致这些问题的元素：

&lt;div style="transform: rotate(-20deg);"&gt;x&lt;/div&gt;

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

我使用的是 Firefox 70.0.1（64 位）。 Google Chrome 中似乎不会出现此问题。

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

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

【问题讨论】：

我认为这与变换无关。肯定是别的东西
<div> 上是否有任何听众订阅？文件 markup.js 有什么作用？
这不是transform 的问题，因为该属性几乎支持所有最新版本的浏览器
查看这些行中的 markup.js 文件，看看有什么问题
@Andrew，没有 markup.js 文件。您可以从字面上创建一个包含该元素的 html 文件并显示警告。 markup.js 也不是我正在使用的任何扩展的一部分。

标签： javascript html css firefox css-transforms

【解决方案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 上打开一个问题（很惊讶我还没有找到...）

【讨论】：