New unsupported CSS pseudo selectors are breaking basic ones

By design Issue #16651302

Open new issue

Browse all tracked issues

Details

Author
anthony d.
Created
Mar 29, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Standard affected
Selectors Level 3

Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

There are some newer CSS selectors such as :focus-within, :focus-visible, :focus-ring. They are not currently supported in IE or Edge which is fine. But what’s the real issue is that using them they break other basic pseudo selectors such as :hover and :focus. I would expect that they would be ignored if they aren’t supported rather than breaking other selectors.

Here is a codepen isolating the issue.
https://codepen.io/anthony-dandrea/pen/zWWGpK

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Steven K. Mar 30, 2018 2018-03-30T02:01:31.95Z

      Changed Assigned To to “Steven K.”

      Steven K. Mar 30, 2018 2018-03-30T02:19:44.25Z

      Changed Steps to Reproduce

      OSG V. Mar 30, 2018 2018-03-30T02:50:03.577Z

      Changed Assigned To to “Bogdan B.”

      Francois R. Mar 30, 2018 2018-03-30T19:45:37.01Z

      Changed Status to “By design”

    • Steven K. Mar 30, 2018 2018-03-30T21:14:18.47Z Microsoft Edge Team

      Hi Anthony,

      I was able to repro this issue in 16299.309 and a recent development build.  After talking to one of the developers in this area, it was determined that this was “by design.”  See the following reference from the “Selectors Level 3” W3C Candidate Recommendation from the 30th of January 2018:

      https://www.w3.org/TR/2018/CR-selectors-3-20180130/#grouping

      "Warning
      the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire group of selectors would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated."

      Which I was not aware of.  Hope this helps and appreciate this submission,

      Steve

    • anthony d. Mar 30, 2018 2018-03-30T21:40:54.95Z

      Thank you! Looks like the “fix” is to just declare :focus-within styles completely separate https://codepen.io/anthony-dandrea/pen/yKKGQR

    • Steven K. Mar 30, 2018 2018-03-30T22:19:04.527Z Microsoft Edge Team

      Glad it helped.  I was thinking the same thing, however, I did not have time yet to look at the repro again to see if that was an option.  That sounds like a working solution.  :)

      Again thanks for the support and submission.  Always nice to learn something new that is useful,

      Steve

    You need to sign in to your Microsoft account to add a comment.

    Sign in