-webkit pseudo-element selectors makes the CSS rules fail.

RESOLVED FIXED in Firefox 63



a year ago
7 months ago


(Reporter: karlcow, Assigned: xidorn)



59 Branch
Bug Flags:
webcompat ?

Firefox Tracking Flags

(firefox63 fixed)


(Whiteboard: [webcompat:p3][wptsync upstream], URL)


(2 attachments, 2 obsolete attachments)



a year ago
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

.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.


a year ago
Flags: webcompat?

Comment 1

a year ago
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...

Comment 3

a year ago
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...


I wonder what kinds of things would break by fixing this...
Whiteboard: [webcompat] → [webcompat:p3]
See Also: → 1331793
Duplicate of this bug: 1480029


8 months ago
Assignee: nobody → xidorn+moz

Comment 6

8 months ago
This may need to wait until the soft code freeze ends.
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?)

Comment 11

8 months ago
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.
Attachment #9003694 - Flags: review+
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.
Attachment #9003696 - Flags: review+
Attachment #9003694 - Attachment is obsolete: true
Attachment #9003696 - Attachment is obsolete: true
Attachment #9003695 - Attachment description: Bug 1424106 part 2 - Accept unknown webkit pseudo-element. r=emilio → Bug 1424106 - Accept unknown webkit pseudo-element. r=emilio
Comment on attachment 9003695 [details]
Bug 1424106 - Accept unknown webkit pseudo-element. r=emilio

Emilio Cobos Álvarez (:emilio) has approved the revision.
Attachment #9003695 - Flags: review+

Comment 16

8 months ago
Pushed by xquan@mozilla.com:
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
Whiteboard: [webcompat:p3] → [webcompat:p3][wptsync upstream]
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 19

8 months ago
Last Resolved: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla63
Upstream PR merged


8 months ago
Blocks: 1486325

Comment 21

8 months ago
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.

Comment 22

7 months ago
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.

Comment 23

7 months ago
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.


7 months ago
Summary: -webkit pseudo selectors makes the CSS rules fail. → -webkit pseudo-element selectors makes the CSS rules fail.
You need to log in before you can comment on or make changes to this bug.