1364518 - thegunmag.com - white shadow makes highlighting (selecting) text makes it unreadable

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P5)

Description

[Worcester12345]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170511130324

Steps to reproduce:

1) Go to web page
2) Select some text



Actual results:

3) Observe selected text is unreadable


Expected results:

4) Text should have been readable (so you know you have the right text to copy)

Comment 1

[Worcester12345]

web site in question:
http://www.thegunmag.com/legislative-update-may-08-2017/

browser:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0 ID:20170511130324

Comment 2

[Loic]

Attachment: selection-FF54.png

Chrome has the same issue, selected text is blurry.

Comment 3

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 4

[Mats Palmgren (inactive)]

I think this is a site issue...

Comment 5

[Karl Dubost💡 :karlcow]

Yeah. Not sure why they decided to do that. This would happen in any browsers. 

Basically the text has a white shadow which is not visible on white background, but because selection gives the background a color, the white shadow becomes visible and gives this blurry effect.

#post-entry .post-meta {
	text-shadow: 2px 0px 1px #fff;
}


The fix:
Just removes the white shadow on the text. Specifically when it is on a white background.

This is a low priority but feel free to contact them about it.

Comment 6

[Worcester12345]

Here is another site with fuzzy text.

Highlight some text, then keep highlighting, dragging down so as to include a hyperlink, such as "club’s appeal of a cease-and-desist order on all". The hyperlink will appear fuzzy.

Is this the same thing?

http://www.telegram.com/news/20170516/westminster-zoning-board-allows-gun-club-to-resume-shooting

Comment 7

[Karl Dubost💡 :karlcow]

Worcester12345: Yes.

article.full > .inner .article-body .inner > p a {
	text-shadow: -.05em -.05em white, -.05em .05em white, .05em -.05em white, .05em .05em white;
	background-size: 5px 1em;
	box-shadow: inset 0 -0.175em #fff,inset 0 -0.2em rgba(105,128,150,0.8);
	display: inline;
}


See https://miketaylr.com/posts/2017/05/please-kill-text-shadow-in-selection.html

Comment 8

[Worcester12345]

(In reply to Worcester12345 from comment #6)
> Here is another site with fuzzy text.
> 
> Highlight some text, then keep highlighting, dragging down so as to include
> a hyperlink, such as "club’s appeal of a cease-and-desist order on all". The
> hyperlink will appear fuzzy.
> 
> Is this the same thing?
> 
> http://www.telegram.com/news/20170516/westminster-zoning-board-allows-gun-
> club-to-resume-shooting

(In reply to Karl Dubost :karlcow from comment #7)
> Worcester12345: Yes.
> 
> article.full > .inner .article-body .inner > p a {
> 	text-shadow: -.05em -.05em white, -.05em .05em white, .05em -.05em white,
> .05em .05em white;
> 	background-size: 5px 1em;
> 	box-shadow: inset 0 -0.175em #fff,inset 0 -0.2em rgba(105,128,150,0.8);
> 	display: inline;
> }
> 
> 
> See
> https://miketaylr.com/posts/2017/05/please-kill-text-shadow-in-selection.html

The one in the telegram link seems to not be an issue (at least that I can tell) any more. Did something change?

Comment 9

[Karl Dubost💡 :karlcow]

Attachment: telegram screenshot

It is still there on text with links.

Comment 10

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 11

[Alice0775 White]

Seems duplication of Bug 857924

Comment 12

[Mats Palmgren (inactive)]

No, I don't think so. This issue is a clear web-site issue, whereas bug 857924
is (was?) an actual bug in our rendering of the text shadows.

Comment 13

[Oana Arbuzov [:oanaarbuzov]]

The issue is still reproducible.
https://prnt.sc/n_QLZOHbR3-e

Tested with:
Browser / Version: Firefox Nightly 102.0a1 (2022-05-18)
Operating System: Windows 10 Pro

Comment 14

[Worcester12345]

Ha ha. I was going to say "It works for me.", but then realized I'm using Chrome! Using Chrome more and more now.

Comment 15

[Worcester12345]

Seeing this same thing here:
https://en.wikipedia.org/wiki/Andrew_the_Apostle

using Chrome Version 102.0.5005.115 (Official Build) (64-bit)

Firefox is kind of unusable these days for me.

Comment 16

[Worcester12345]

Also here:
https://turtleboysports.com/

Comment 17

[Raul Bucata]

We appreciate your report. I was not able to reproduce the issue:https://prnt.sc/4cMGUOSedZ0Q

Reporter, does the issue still reproduces?

Tested with:

Browser / Version: Firefox Nightly 110.0a1 (2023-01-12) (64-bit)
Operating System: Windows 10 PRO x64

Suggestion: Try clearing cache/data/cookies, disabling add-ons and Ad-blocker (if available) and extensions or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in about:config) please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

Comment 18

[Worcester12345]

(In reply to Loic from comment #2)

Chrome has the same issue, selected text is blurry.

Still getting that. This time in http://www.thegunmag.com/coopers-57-m-one-mans-ultimate-rimfire/