The remaining blue color in ::selection?

Question

The ::selection { } CSS element selector is supposed to replace the default blue-colored text selection with our own choice of text and background color.

However, this seems not always the case, as I often see websites which has the remaining blue color. It's not completely replaced with our owh choice of color.

======EDIT======

I guess it's easier to see by our own eyes rather than through screenshot.

See this page for example: bleachindonesia.com/2012/05/27/bleach-day

On that page, if you try to select all (Ctrl+A), you would see the text will be blocked/selected with gray color. Yes, because the page CSS employs ::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.

However, as you can see with the screenshot below, it leaves some default, blue-colored selection on some part.

http://i.stack.imgur.com/A0aUJ.png

Notice the color difference, and at the same time, the unselected part. There are some parts on the site that gets selected with the default blue-colored ::selection, but at the same time there are also some other parts that doesn't get selected.

---

Meanwhile, there is also this page: 24ways.org/2005/swooshy-curly-quotes-without-images

Again, try to select all (Ctrl+A) the page. You could see all selection is perfectly maroon-colored. There is no default blue-colored selection. There is only parts that doesn't get selected, but there is no the default blue-colored selection. As pictured by the screenshot below:

http://i.stack.imgur.com/4o6ll.png

The page CSS? ::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }. The only difference with the first page that it uses RGBA and not hex code. I don't think it makes any difference there--it's essentially the same code.

Now what makes me wonder.

Why is on the first page the default blue-colored select persists, but it doesn't persist on the second page? And, how to make it as perfect as the second page?

Answer 1

Frankly, it's very difficult to tell if this is buggy behavior, although I'd surmise that it looks very much like it. ::selection suffered from a lack of proper definition (and thus a lack of proper implementation and testing), so I bet even browser vendors have had trouble figuring out what's wrong.

Worth mentioning is that this rule, from the first site:

::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }

Seems very much benign, except it incorrectly combines ::selection and ::-moz-selection such that it will never work in Firefox, because it doesn't recognize ::selection and drops the whole rule. 24ways.org doesn't display the selection color properly in Firefox either, not because of combined selectors but because there is no ::-moz-selection selector in the first place.

As to why Chrome and Safari leave blue areas of highlight in certain areas in the first site, I really don't know. However, I think Jared Farrish makes a good point:

This replicates the problem in Chrome (at least): jsfiddle.net/RfPgt It seems to be when an element is nested within another element which itself has selectable elements.