transform: rotate(); throws warnings in firefox

Question

I am creating a webpage, and when debugging I get the following warnings.

    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

Strangely enough, my html file has no markup.js file. No idea what it is. I narrowed it down to an element that was causing these issues:

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

Not only that, every time I hover over the element in the inspector, more warnings appear.

I am using Firefox 70.0.1 (64-bit). This problem does not seem to occur in Google Chrome.

The expected behaviour is of course that there should not be any warnings.

The messages are very annoying and I do not want to turn off warnings. Can someone tell me what is going on here?

Answer 1

This markup.js file is part of the browser's internal dev-tools. It is not something your code is responsible of, nor that you can fix, and even less should care about.

The DOM highlighter uses some svg elements to render lines and highlight zones over your page. Something in there is producing a NaN value, which turns out to be invalid for svg <line> and <linearGradient> attributes.

This warning is displayed everytime such invalid attribute is set, if you wish, you can make it fire yourself:

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

Open Firefox's dev tools to see the warning.

But once again, your code is not responsible of this warning. Your users will only see it if they do highlight the element. I.e it is not something you want to care one more minute.

If you have free time though, you are welcome to open an issue on mozilla's bugzilla (quite surprised I can't find one already...)