Fix: polyfill not working on iOS Safari below 14.5

[colbat]

Fix an issue where the polyfill is not working on iOS Safari versions below 14.5. It leads to the container queries being ignored and the style being applied regardless of the container query conditions.

The check for the :where() support on these iOS versions below 14.5 is returning false even though it should be supported from Safari 14.0 (from what we can see on caniuse). This leads to the style breaking and we can also see the warnings in the console. It seems that CSS.supports() for selectors is not working.

.
(Screenshot taken from lambdatest on an iPhone 12 Pro Safari iOS 14.1)

I replaced this check by checking for document.querySelector(':where(div)'); instead in a try catch which seems to fix the issue.

To be noted, the issue is not happening on macOS, I could reproduce the issue only on iPhones and iPad.

Could be related to #80

[dwhiterei]

@colbat Do you have a compiled version of this fix anywhere? I have a sneaking suspicion this pull request isn't getting acted on any time soon... and I kinda need an iOS 14 fix toot sweet.

[JuSeonmi]

@colbat,
hi~ I am the issue writer! Sorry for the late reply, but I really appreciate the correction.
I also agree with dwhiterei's opinion. because it was announced in the readme... We are not planning to add more features or enhancements. I would like to use this modified version. how can I use it?