Why is the selection removing the line going through the text of the strike tag? Here is a video.
codepn
Is there any javascript solution like
target.tag=(s) {
strike_remove.select(none);
}
PS: the code above is fake LOL
Show us a working page so we can see the problem happen in our browsers.
I can not it is a localhost file let me create a CodePen one sec…
It seems as though the background of the ::selection is painted over the strike-through but under the text.
The only solution I can see is to make the background partially transparent.
e.g.
::selection {
background-color: rgba(255, 255, 0, .5);
color: black;
}
1 Like
Hard for me to tell because I cannot see the problem (possibly my fault).
I copied your code from the codePen and pasted it into a “working page”. Nothing tricky about that. For testing purposes, I changed the color of the selected text to RED. I then moved the working page to an offline PC where I have a modern O/S and browser and opened it. The background image is missing. This is what I see.
or more specifically, I don’t see the strike line being removed by ::selection.
my working page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>codeman's selection</title>
<!--
https://www.sitepoint.com/community/t/why-is-the-selection-removing-the-strike-line-made-by-the-strike-tag/368125
May 20,2021 4:20 PM
-->
<style>
.ban1 {
width: 100%;
height: 500px;
background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=752&q=80");
/*
original link is /jwcodeme/assets/Ban_1_bg.jpg
*/
}
.ban1 h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
padding-top: 10%;
}
.ban1 h3 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
}
.ban1 button {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: Transparent;
cursor: pointer;
overflow: hidden;
border: solid 1px;
padding: 10px 15px 10px;
border-radius: 5px;
font-weight: bold;
}
.ban1 button:hover {
background-color: black;
transition: 1s;
color: white;
border: none;
}
::selection {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div class="ban1">
<h1>Get Lessons on HTML for
<s>$10.00/1 lesson</s> <i><b>$5.00/1 lesson</b></i></h1>
<h3>🎉30 money back guarantee🎉</h3>
<br />
<br />
<br />
<button>Take The Lesson!</button>
<br />
<br />
<br />
<br />
<br />
<p style="font-size: 10px; text-align: center;">Our Terms of use and Privicy Policy all apply.</p>
</div>
</body>
</html>
Maybe I misunderstood the question… @PaulOB? or anyone?
The line-through is missing when highlighted in my Chrome on Mac. I didn’t test other browsers so may be browser specific. It’s not just line-through but underline on links is also obscured.
I’ll have to test my other browsers after a good nights sleep 
1 Like
It isn’t happening in Firefox on Ubuntu.
3 Likes
Just checked in Firefox and Safari mac and the line-through doesn’t disappear on selection.
It seems to be a chrome bug/behaviour only. The only solutiuon is as i posted above and to use a transparent background to allow the line-through to show.
e.g.
::selection {
color: #000;
background-color: rgba(255,255,0,0.6);
}
It looks like that’s how Chrome is doing it anyway as the line-through is slightly faded on the default highlight also.
2 Likes
Looks fine here as well on my Firefox mobile.
I am using chrome everyone! 
That seemed likely, as it appears to be the only browser affected. 
We were establishing whether or not the problem affects all browsers, or just one. It is useful to know whether you are dealing with a general coding issue or a browser-specific issue.
5 Likes
I’d be asking “why” too… since there has been no STRIKE or S tags in HTML since 1997. Just how old is this code? Bleeding edge of HTML 3.2 right there!
But then since it’s causing problems for large swaths of users by using pixel metrics, using bold and italic tags for things that aren’t legal entity names or book / document titles, and static style in the markup… Yeah, worst practices from twenty years ago.
There is no <strike> tag, but the <s> tag is still alive and well.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.