Serious problems in Internet Explorer

[ivnsch]

I finished developing my homepage with style-elements, looks great in all browsers (tested on Chrome, Firefox, Safari, Opera and some mobile browsers) but in Internet Explorer(11) and Edge it's a mess. The main issue seems to be that the height of elements is not computed correctly.

I can prepare small examples when I have time, but I'd appreciate some initial feedback, maybe something is already known or can be inferred from looking at the html.

(Link to webpage removed as I've fixed the issues by replacing grid with rows and columns).

[nelsonic]

@i-schuetz might be worth uploading screenshots of Chrome/FF vs. IE as many people do not have access the Microsoft browsers. 💡

[mdgriffith]

We spoke on slack, but I'm leaving a message here in case anyone happens upon this.

After some digging, this is due to css grid support being less than stellar for previous versions of Edge and current versions of IE.

To fix this, IE would need to improve it's support of css grids, though who knows if that will happen.

The best solution right now is to just use row and column to replace the grid element.

[ivnsch]

I'm changing the layout from grid to rows/columns, in case anyone looks at the page in Internet Explorer. Soon everything will be replaced and the bugs not visible anymore (I hope). I'll actually remove the link to the page to avoid confusion.

[jethrolarson]

I found this library via https://www.youtube.com/watch?v=w4_1SagLY94 and I really wish his assertion that [if you use this library you support these browsers] held true. At the very least style-elements should be clear on which browsers and versions are supported so that users can make an informed decision.

[ivnsch]

My personal opinion: Unless grid can be fixed (maybe with a workaround) or mapped internally by style-elements to rows/columns, I'd just remove it (until IE supports it). Or maintain a "caniuse" for style-elements, but this probably goes against the goals of the library. Very few people will see the note that was added in https://github.com/dwyl/learn-elm/issues/96

Edit: Considering that (so far I understood) this is a bug of IE and not official lack of support, maybe a warning in the documentation (perhaps with a link to a bug report if that's possible) is okay.

[mdgriffith]

Adding a note and a link in the documentation makes sense.

Yeah, I'm actively considering removing grid in the long term, or at least replacing it with something that doesn't compile exactly to css grid.

There will be a browser compatibility table for style-elements at some point, obviously with the goal of having everything green. It's a bit hard to verify an entire library, but there is some browser and testing automation that I've been working on that should get us most of the way there.