Demo Application Does Not Work in Safari 15 or 16

[spiralman]

I wanted to evaluate the behavior of the polyfill in Safari 15 & 16 before integrating it into my project, so I opened the demo netlify app in each browser (I was using Saucelabs to access the browser), and in both cases, the styling of the demo app had issues:

In Safari 15, the demo application was usable, but completely unstyled.

In Safari 16, the demo application is completely unusable, as all the elements on the screen are invisible (except for the code samples, and, only when hovering, the OddBird logo in the nav bar).

It seems like, if the purpose of the library is to support older browsers, the demo app should probably work in older browsers. It certainly gives me pause as to the extent of the backwards compatible support if the demo app doesn't work in older browsers.

How is the polyfill being tested in these browser environments?

Note: I don't see any code for the demo app in this repo, but couldn't find a repo in your org that does have it. If there's a better place to file the ticket, please let me know.

[jgerigmeyer]

@spiralman Thanks for reporting! I'm able to reproduce what you're seeing in Safari 15, but Safari 16 looks mostly-fine to me, with the exception of some Shadow DOM content.

It seems like, if the purpose of the library is to support older browsers, the demo app should probably work in older browsers. It certainly gives me pause as to the extent of the backwards compatible support if the demo app doesn't work in older browsers.

A fair point! We're working under very limited time/money resources at the moment, and just recently launched even the most basic version of a styled demo page -- whereas the polyfill itself has been used in production heavily over the past year. We'll take a look, but if you're willing to dig in and contribute that would be much appreciated!

How is the polyfill being tested in these browser environments?

In CI at the moment we're testing against Chromium 113, Firefox 112, and Webkit 16.4.

Note: I don't see any code for the demo app in this repo, but couldn't find a repo in your org that does have it. If there's a better place to file the ticket, please let me know.

Everything is here in the repo. The demo is served from index.html, with styles in the css folder.

[jgerigmeyer]

@stacyk or @dvdherron Could one of you look into this?

[dvdherron]

@jgerigmeyer I think there might be two things causing the styles not to show properly here. The oldest version of Safari probably doesn't have support for Cascade Layers. The issue in the later version of Safari is probably caused by lack of CSS support for nesting. I could rework some of the css so that we're not using nesting. As far as Layers support, I could unlayer some of the critical styles or we could use our polyfill?

[jgerigmeyer]

I could rework some of the css so that we're not using nesting. As far as Layers support, I could unlayer some of the critical styles or we could use our polyfill?

Those both sound reasonable to me, I'm fine with whatever you'd propose 👍

[dvdherron]

@stacyk I only got so far as to test whether I was right about what was causing the style issues here. Nesting will obviously be an issue with some styles since that's one of the latest features to be implemented. But I think the main cause of style issues is layers. Like I mentioned above, we could either unlayer the bare minimum styles to have this work okay in older browsers, or make use of our polyfill. Container queries are used for styles here too, but I don't think them not working is having as drastic of an effect on the layout as layers/nesting.

[jgerigmeyer]

Like I mentioned above, we could either unlayer the bare minimum styles to have this work okay in older browsers, or make use of our polyfill.

I think adding the layers polyfill is fine, if that's quickest and works well.

[dvdherron]

@mirisuzanne @jgerigmeyer The demo site is importing individual stylesheets for each layer in a style tag in the head, similar to what we're doing on workshops.oddbird.net.

What would be the ideal way implement the layers polyfill with this setup? The polyfill is looking for a .css file and wouldn't find the @imports located in a <style> tag in the <head>, right?

Would it be best to move all of those 'import's with their respective layers to, say, a allstyles.css style sheet? Or could the polyfill work with the current setup?

[jgerigmeyer]

What would be the ideal way implement the layers polyfill with this setup? The polyfill is looking for a .css file and wouldn't find the @imports located in a <style> tag in the <head>, right?

I think you're right -- we'd need to have all @layer references in an external stylesheet that gets preprocessed with postcss. Would it be easier to remove our use of layers (and nesting) for at least a basic version of this demo site?

[mirisuzanne]

@dvdherron The first thing I would try is just removing layers all together. I bet we would only have a couple issues that we could deal with using specificity tricks. For such a small site, that seems simpler than working in another polyfill.