Negative text-indent in audited page crops the "badge" text displayed near each element

[PhilippeVay]

Summary

If an element in the audited page is styled with a negative text-indent text-indent: -2rem and is highlighted by ARC Toolkit, the yellow text ("badge") is displayed outside the black background because of the negative text-indent on parent element and is unreadable.

Text added by the extension would need some CSS reset to avoid this situation.

Expected result

I'd expect highlighting text to be readable (all characters of the yellow text displayed on the black background.

Actual result

The first letters of the yellow highlighting text have no background and are unreadable.

Test Case

JSBin where 2 H2 and 3 paragraphs are styled with text-indent: -2rem ➡️ https://jsbin.com/fobowivupi/

• Run ARC Toolkit then select any of the following features: Language, Headings, Pseudo content or Buttons.
• Yellow text is only partially readable.
• Bugfix: Inspect yellow text, add to .languages-highlight-note span (*) text-indent: 0 declaration. Highlighting text is now readable in this situation.

(*) Or .headings-highlight-note, .pseudoContent-highlight-note, .forms-highlight-note-pre-node for the 3 other features I tested. There are others obviously

Additional Information

There are probably a dozen other CSS properties that can be inherited by highlighting text and cause problems…
all: initial is resetting too much properties, alas.
all: unset seems OK with pseudo content and headings but not button, maybe because in the former case, it's inserted into the headings and in the latter case it's inserted right before the button?

ARC Toolkit version

Version 3.3.2.0

Operating System and version

Windows 10 Pro, x64

Browser and version:

Chromium Version 79.0.3922.0 (64-bits)