Fortunately, the issue is technically resolved. Upon close inspection, you may actually observe it, although it is so faint that it is nearly imperceptible.
It seems that Firefox is not displaying the selection background in the same way as Chrome, and appears to struggle with the ::-moz-selection background color being very similar to the section's background color.
Solution: Differentiate the color of ::-moz-selection from ::selection:
main section::selection {
color: inherit;
background-color: #499299; /* Original color for Chrome */
cursor: text;
}
main section::-moz-selection {
color: inherit;
background-color: #297279; /* Adjusted color for Firefox */
cursor: text;
}
Below is the complete working code:
main section {
cursor: default;
background-color: #479097;
border: 1px solid #000;
padding: 2px;
margin: 15px 5px 15px 5px;
font-size: 20px;
text-shadow: 1px -1px 0 #000;
}
main section::selection {
color: inherit;
background-color: #499299;
cursor: text;
}
main section::-moz-selection {
color: inherit;
background-color: #297279;
cursor: text;
}
<main>
Contents:
<section id="1">
<span class="sectionNum">1</span> If you clicked on 1 then you came here. Lorem ipsum dolor sit amet doloremque.
</section>
<section id="2">
<span class="sectionNum">2</span> If you clicked on 2 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, anim id est laborum.
</section>
<section id="3">
<span class="sectionNum">3</span> If you clicked on 3 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing est laborum.
</section>
</main>