[Bug] Named anchors colored as links

stanio commented 1 year ago

Prerequisites

[X] I searched for any existing report about this bug to avoid opening a duplicate.
[X] I can reproduce this bug in a new, unmodified web browser profile with Dark Reader installed as the only extension.
[X] I understand I need to use the Broken Website Report template if this bug I am reporting occurs on a single website.

Bug Description

Non-link named anchor elements get colored as links causing weird coloring, probably more noticeable but not limited to some legacy pages:

sample-darken-page

The first couple of paragraphs and list item 1) are unexpectedly colored blue.

Website Address

https://docs.oracle.com/javase/8/docs/technotes/guides/troubleshoot/prepapp002.html

Steps To Reproduce

Create HTML file:

<!DOCTYPE html>

<style>
  h2, p a:not(:link):not(:visited) {
    color: green;
  }
</style>

<h1><a id="main-heading">Main heading</a></h1>

<p><a href="https://github.com/darkreader/darkreader/issues"
  title="Issues · darkreader/darkreader">Sample link</a></p>

<a name="legacy-markup">
<p>Buffalo dolor ham, picanha nostrud short loin filet mignon. Biltong enim ex,
velit deserunt chislic cupim non esse exercitation officia ut adipisicing
proident. Ad aute anim beef ribs kielbasa labore, ham hock sausage beef
exercitation ut lorem ball tip picanha jerky. Kielbasa shoulder dolore beef
leberkas, cupidatat rump. Quis capicola dolore sirloin. Ad tri-tip tongue
bacon porchetta, laboris cupim eu pancetta ham hock pariatur voluptate.</p>
</a>

<h2><a id="sub-heading">Sub-heading</a></h2>

<p><a id="inline-anchor" title="Inline anchor">Ipsum eiusmod ham</a> short loin
turkey frankfurter sirloin lorem landjaeger shank filet mignon. Eu esse
biltong ut tempor drumstick. Do cupim ut, jowl in alcatra nostrud strip
steak. Voluptate kevin labore cupim eiusmod, shoulder shankle pork belly
ipsum velit. Rump enim in shankle cillum laborum dolore ullamco aute alcatra
chuck nulla qui. Occaecat ad enim pork beef ribs tempor.</p>

Open in the browser with Dark reader theme enabled.

Expected Behavior

expected-dark-theme

Actual Behavior

actual-dark-theme

Screenshots

Default light theme preview:

light-theme

Operating System

Windows 10

Web Browser name and version

Firefox Developer Edition 108.0b9

Dark Reader version

4.9.60

Additional Context

Using the browser DOM/style inspector tool, after the Dark reader theme is applied I'm observing the following style rule applied:

a {
    color: #3391ff;
}

I guess it should be better defined as:

a:link, a:visited {
    color: #3391ff;
}

so it doesn't get applied to non-link named anchors.

I'm currently working around this by applying custom CSS (in the Dark reader "Dynamic theme editor"):

a:not(:link):not(:visited) {
    color: unset;
}

Gusted commented 1 year ago

This seems to be a duplicate of #9836

stanio commented 1 year ago

Yes, looks like it. At least I have provided some real-world examples (the Java 8 docs). I've encountered it on other sites I can't remember/point to at the moment, as well. Please close this one at your discretion.

Gusted commented 1 year ago

Closing, referenced this issue in the other issue. Many thanks for the information!

darkreader / darkreader