4 ms·

What issues are people actually facing in regards to browser compatibility on evergreen browsers in 2021? I keep hearing people complaining about Safari but no

What issues are people actually facing in regards to browser compatibility on evergreen browsers in 2021? I keep hearing people complaining about Safari but no one has explained what issues they actually face. The article mentions CSS but I've not encountered any incompatibilities so far. I've made SPAs, normal sites, used CSS Grid, some simple animations, all been fine across browsers.

jjcm 5y ago
My most recent issue was with the ElementInternals API: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... They still don’t have it implemented despite giving their “strong support” a few years ago when the API was in the final spec stage. That’s really the crux of the issue - they always seem a few years behind in implementing any new spec.
- robertoandred 5y ago
  Firefox hasn't exactly implemented it either.
  - jjcm 5y ago
    No, but at the very least Firefox has the bare minimum needed not to crash js execution when it encounters usage of the API. Safari doesn't recognize the syntax (or at least didn't when I tested this ~5 months ago, though it looks like nothing has changed on the safari side).
- lloydatkinson 5y ago
  Wow thats terrible actually. I remember looking into how to get web components to work with forms and decided to put it off for a while. Didn't know Safari doesn't implement it yet. Is there a polyfill?
  - jjcm 5y ago
    There is: https://github.com/calebdwilliams/element-internals-polyfill https://github.com/calebdwilliams/element-internals-polyfill
- asddubs 5y ago
  webp also took them ages and hopefully avif won't take as long as webp did
extra88 5y ago
Safari was slow to support the `gap` property for Flexbox and still doesn't support it for multi-column layout (e.g. `column-count: 2;`). They were slow to support the `aspect-ratio` property. Safari doesn't support `:focus-visible` (this is a weird one because Safari's `:focus` is already comparable to `:focus-visible` but not supporting the new pseudo-class really complicates how CSS rules have to be written). On the other hand, Safari supported `:is()`, `:where()`, and ::marker before Chrome. There have been other cases of Safari being earlier and not just for things they've originated.
- ksec 5y ago
  >Safari was slow to support the `gap` property for Flexbox and still doesn't support it for multi-column layout (e.g. `column-count: 2;`). https://caniuse.com/?search=column-count https://caniuse.com/?search=column-count ??
  - extra88 5y ago
    Yes, Safari supports `column-count`. I wrote it still doesn't support using `gap` with it. https://caniuse.com/mdn-css_properties_gap_multicol_context https://caniuse.com/mdn-css_properties_gap_multicol_context

jjcm 5y ago

My most recent issue was with the ElementInternals API: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... They still don’t have it implemented despite giving their “strong support” a few years ago when the API was in the final spec stage. That’s really the crux of the issue - they always seem a few years behind in implementing any new spec.

robertoandred 5y ago
Firefox hasn't exactly implemented it either.
- jjcm 5y ago
  No, but at the very least Firefox has the bare minimum needed not to crash js execution when it encounters usage of the API. Safari doesn't recognize the syntax (or at least didn't when I tested this ~5 months ago, though it looks like nothing has changed on the safari side).
lloydatkinson 5y ago
Wow thats terrible actually. I remember looking into how to get web components to work with forms and decided to put it off for a while. Didn't know Safari doesn't implement it yet. Is there a polyfill?
- jjcm 5y ago
  There is: https://github.com/calebdwilliams/element-internals-polyfill https://github.com/calebdwilliams/element-internals-polyfill
asddubs 5y ago
webp also took them ages and hopefully avif won't take as long as webp did

extra88 5y ago

Safari was slow to support the `gap` property for Flexbox and still doesn't support it for multi-column layout (e.g. `column-count: 2;`). They were slow to support the `aspect-ratio` property. Safari doesn't support `:focus-visible` (this is a weird one because Safari's `:focus` is already comparable to `:focus-visible` but not supporting the new pseudo-class really complicates how CSS rules have to be written). On the other hand, Safari supported `:is()`, `:where()`, and ::marker before Chrome. There have been other cases of Safari being earlier and not just for things they've originated.

ksec 5y ago
>Safari was slow to support the `gap` property for Flexbox and still doesn't support it for multi-column layout (e.g. `column-count: 2;`). https://caniuse.com/?search=column-count https://caniuse.com/?search=column-count ??
- extra88 5y ago
  Yes, Safari supports `column-count`. I wrote it still doesn't support using `gap` with it. https://caniuse.com/mdn-css_properties_gap_multicol_context https://caniuse.com/mdn-css_properties_gap_multicol_context