www.newyorker.com - text is not visible

[bull500]

URL: http://www.newyorker.com/culture/cultural-comment/everyone-hates-martin-shkreli-everyone-is-missing-the-point
Browser / Version: Firefox 47.0
Operating System: Linux
Problem type: Text is not visible

Steps to Reproduce

1. Navigate to: http://www.newyorker.com/culture/cultural-comment/everyone-hates-martin-shkreli-everyone-is-missing-the-point
2. Select the text of the story - that includes the underlined Hyperlinks

Expected Behavior:
Selected underlined hyperlink text should be visible

Actual Behavior:
Font is distorted upon selection and un-readable

[tsl143]

This is basically due to text-shadow CSS written for[data-smart-underline-link-always].

[karlcow]

Showing the issue in Firefox: the "said" is a link here like "Experts" and "headline".

This is what is happening in Blink / Opera

[bull500]

attaching screenshot to better depict problem

[bull500]

Happens in a weird way on Firefox android as well!

[karlcow]

Thanks @bull500 and @tsl143

The CSS for this part is

[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-always],
[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-hover]:hover, [data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-always]:visited,
[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-hover]:visited:hover {
  color: rgb(0, 0, 0);
  text-decoration: none !important;
  text-shadow: 0.03em 0 rgb(255, 255, 255), -0.03em 0 rgb(255, 255, 255), 0 0.03em rgb(255, 255, 255), 0 -0.03em rgb(255, 255, 255), 0.06em 0 rgb(255, 255, 255), -0.06em 0 rgb(255, 255, 255), 0.09em 0 rgb(255, 255, 255), -0.09em 0 rgb(255, 255, 255), 0.12em 0 rgb(255, 255, 255), -0.12em 0 rgb(255, 255, 255), 0.15em 0 rgb(255, 255, 255), -0.15em 0 rgb(255, 255, 255);
  background-color: transparent;
  background-image: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -webkit-linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  background-image: -moz-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -moz-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -moz-linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  background-image: -o-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -o-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -o-linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  background-image: -ms-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -ms-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), -ms-linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-always]::selection,
[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-hover]::selection:hover {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}

[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-always]::-moz-selection,
[data-smart-underline-container-id="2"] [data-smart-underline-link-color="rgb(0, 0, 0)"][data-smart-underline-link-hover]::-moz-selection:hover {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}[data-smart-underline-link-background-position="68"] {
  background-position: 0% 68%, 100% 68%, 0% 68%;
}[data-smart-underline-link-background-position="69"] {
  background-position: 0% 69%, 100% 69%, 0% 69%;
}

The user agent stylesheet in Blink has something interesting

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

The issue comes the property with text-shadow (as @tsl143 mentioned) but on the pseudo-element ::selection. Let's simplify the rule above to make it more obvious:

.selector::selection, 
.selector::selection:hover {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}

Selection should be supported by Firefox as said in https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

but the issue might be with the selector itself. In the console we can see:

Unknown pseudo-class or pseudo-element 'selection'.  Ruleset ignored due to bad selector.

[karlcow]

Though at the same time… it doesn't seem to work :) in Firefox
https://codepen.io/anon/pen/EPOBNL

Let's see if there is an open bug about this.

[karlcow]

There are discussions for removing the prefix https://bugzilla.mozilla.org/show_bug.cgi?id=509958 aka -moz::selection. But I wonder if it's related to https://bugzilla.mozilla.org/show_bug.cgi?id=68206 from 2001 Bug 68206 - the Text Field Highlight color is not skinnable

It's indeed weird.

@dholbert might know who at Mozilla knows this part of the code.

[karlcow]

hmm there is indeed an issue on Firefox with ::selection.

[karlcow]

::-moz-selection {color:red;} is working.

[dholbert]

@dholbert might know who at Mozilla knows this part of the code.

I don't know anything special here; I probably would've found & directed you to the bugs that you already mentioned, particularly bug 509958. dbaron's comments on that bug (comment 2 & 4) seem particularly relevant; it sounds like -moz-selection differs from the specced version in some respect, which is why we haven't unprefixed. (I don't know the details though, or if it's on the roadmap for fixing up.)

[karlcow]

Thanks Daniel

After testing a bit further https://codepen.io/anon/pen/EPOBNL
The :hover is breaking the CSS rules. That said I have not yet been able to reproduce the rendering of WebKit/Blink.

[karlcow]

Let me put back in needs-diagnosis to really identify what needs to be changed before we look for contacts

[karlcow]

I put the excerpt of the code setting the style with JS.
https://gist.github.com/karlcow/4e2ca70f20ebfa505b1f

[karlcow]

@hallvors could you test on windows? if the same thing is happening.

[hallvors]

Selecting text makes the link look weird here on Windows too. Looks like a text-shadow effect.

[karlcow]

They must have changed something because the issue has disappeared.