Who or what is injecting "data-contrast" spans into my website (at night) and how to stop it?

Question

It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:

<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>

The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.

Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.

I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.

So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.

Any ideas how to nail this down and find out what causes it?

Answer 1

Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.

In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.

Option 1

You might be able to fix the issue by adding CSS to control how the layout looks:

span[data-contrast="auto"] {...} 

That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.

Option 2

A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.

If you need help creating an alternate theme, CSS Tricks has a good write up.