[Webkit-unassigned] [Bug 227391] New: MobileSafari cannot parse `@supports selector(:nth-child(An+B [of S]?))`

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Jun 25 02:29:43 PDT 2021


https://bugs.webkit.org/show_bug.cgi?id=227391

            Bug ID: 227391
           Summary: MobileSafari cannot parse `@supports
                    selector(:nth-child(An+B [of S]?))`
           Product: WebKit
           Version: Other
          Hardware: iPhone / iPad
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bramus at bram.us

Safari/MobileSafari currently are the only browsers that support the `:nth-child(An+B [of S]?)` selector.

When checking for support for `:nth-child(An+B [of S]?)` using @supports, only Safari on Desktop claims it does; MobileSafari does not understand the rule.


```
@supports selector(:nth-child(1 of x)) { /* BUG: Only targets Desktop Safari, although MobileSafari also supports the selector … */
  …
}
```


See demo at https://codepen.io/bramus/pen/3c476384f0adadd65a0b53db15f86cf4

- Safari: The background is hotpink
- MobileSafari: The background remains the default color

Further findings:

1. MobileSafari's parsing breaks on `selector(:nth-child(1 of x))`. Extending the @supports rule with a check for `-webkit-touch-callout: none` (which MobileSafari does understand) does nothing.

```
@supports selector(:nth-child(1 of x)) or (-webkit-touch-callout: none) {
  …
}
```

2. When adding extra parens around the `selector()` MobileSafari does seem to be able to parse the expression:

```
@supports (selector(:nth-child(1 of x))) or (-webkit-touch-callout: none) {
  …
}
```

3. Singling out `selector()` with extra parens added also doesn't work on MobileSafari:


```
@supports (selector(:nth-child(1 of x))) {
  …
}
```

It is expected that MobileSafari understands all code examples shown, whereas now it only understands the syntax used in the "Further Findings 2" example.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210625/c5c679b0/attachment.htm>


More information about the webkit-unassigned mailing list