This is a spin-off of https://webcompat.com/issues/14117 Go to https://www.saavn.com/corporate/help/ Just go to this page and notice how the magnifier is taking the full space. In Safari it has the right size. layout.css.servo.enabled: true https://webcompat.com/uploads/2017/12/a8df6c71-d769-4069-8a0a-9a42340cfa6e.jpg .promagnifier, .prosettings, .searchsettings, .search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration { display: none !important; } Removing the block .search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration and everything is working. Something is happening with the parsing of that section of selectors.

So... it is expected behavior that when an unknown pseudo-element appears in the selector list, the whole selector list is invalid, and the rule would not apply. However, it seems that WebKit and Blink have a quirk that, when the pseudo-element has -webkit- prefix, it is always treated valid. I have no idea whether we should spec and implement this quirk, or ask other browsers to drop this quirk as well as these pseudo-elements...

Filed w3c/csswg-drafts#2156 for this.

(In reply to Xidorn Quan [:xidorn] UTC+10 from comment #3) > Filed w3c/csswg-drafts#2156 for this. Sounds like it's too high for them to drop... https://github.com/w3c/csswg-drafts/issues/2156#issuecomment-382730864 I wonder what kinds of things would break by fixing this...

This may need to wait until the soft code freeze ends.

Depends on D4185

Depends on D4186

Does it make more sense to accept unknown webkit pseudo-elements, or to accept a list of known ones that webkit accepts? (Otherwise wouldn't we accept things that webkit rejects?)

WebKit and Blink accept any pseudo-element with -webkit-prefix. See w3c/csswg-drafts#2156.

Oops, sorry, should have read more carefully.

Comment on attachment 9003694 [details] Bug 1424106 part 1 - Add starts_with_ignore_ascii_case method and use it for tree pseudos. r=emilio Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment on attachment 9003696 [details] Bug 1424106 part 3 - Add web-platform tests for webkit pseudo-elements. r=emilio Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment on attachment 9003695 [details] Bug 1424106 - Accept unknown webkit pseudo-element. r=emilio Emilio Cobos Álvarez (:emilio) has approved the revision.

Pushed by xquan@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/988b2e838fd1 Accept unknown webkit pseudo-element. r=emilio

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/12673 for changes under testing/web-platform/tests

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Upstream PR merged

I tried to add a println in the parsing code to record what pseudo-elements would we encounter, and then visit several top sites. The following is a list of webkit-prefixed pseudo-elements I see: 302 -webkit-input-placeholder 91 -webkit-scrollbar 39 -webkit-scrollbar-thumb 33 -webkit-search-cancel-button 29 -webkit-search-decoration 24 -webkit-scrollbar-button 18 -webkit-outer-spin-button 18 -webkit-inner-spin-button 17 -webkit-scrollbar-track 10 -webkit-slider-thumb 6 -webkit-media-controls-start-playback-button 5 -webkit-slider-runnable-track 3 -webkit-search-results-decoration 3 -webkit-search-results-button 3 -webkit-media-controls 2 -webkit-scrollbar-corner 2 -webkit-media-controls-wireless-playback-picker-button 2 -webkit-media-controls-timeline 2 -webkit-media-controls-time-remaining-display 2 -webkit-media-controls-play-button 2 -webkit-media-controls-fullscreen-button 2 -webkit-media-controls-current-time-display 2 -webkit-file-upload-button 1 -webkit-validation-bubble-message 1 -webkit-selection 1 -webkit-scrollbar-track-piece 1 -webkit-media-controls-enclosure The number is the total time we parse such pseudo-element, not number of sites. But input-placeholder is indeed one I saw for many sites.

updated https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions to reflect the change. No relevant compat tables were found that required updating.

The note isn't strictly correct. Arbitrary -webkit-prefixed pseudo-class isn't treated valid with this bug, not do other browsers do. I've updated the note in the MDN page to reflect that.