Grid issues in Safari

[shshaw]

https://codepen.io/shshaw/pen/PQbQgE

Tested in 11.1.2; not sure what the issue is.

For reference: here's the CSS that sets up the grid. https://github.com/shshaw/Splitting/blob/master/dist/splitting-cells.css

[shshaw]

https://twitter.com/strafeOK/status/1032370979496898562

I noticed that yours had the same issue unless the columns/rows are set in the JS, like in your image gallery example

https://codepen.io/shshaw/pen/RyOPzb is working, whereas the other example is not. Hm.

It's possible the issue is related to the data-attributes coming through as text and not a number, making Safari barf on the CSS var?

Testing a fix for Safari here: https://codepen.io/shshaw/pen/wEadbM?editors=1100

[shshaw]

https://twitter.com/strafeOK/status/1032376370565791744

Done some testing, if you remove the position: relative on .splitting.cells then the images appear and the effects play. Of course that breaks positioning but it at least shows it's working. Will keep trying, good luck!

[strafeOK]

Setting a fixed height on .splitting .cell works if the height is using pixels. Could calculate that height and apply it in JS? See here

[shshaw]

Fixed dimensions aren't the solution I'd want here. I think there's just something off with how Safari treats the cells in grid, perhaps related to the way CSS vars are used. I'll take a deeper dive when I can, but let me know if you discover anything.

[strafeOK]

100% agree with that! Here's my fix that uses your variables, I've only tested it on Safari. Fixed

Edit 1: Works on android phone in web browser Edit 2: Your pen is now working on Safari - See here

Comparison

Old pen Fixed pen

[shshaw]

Ah, yes. I had a similar solution before switching to grid. It's not super verbose, so I may roll back to something like that. Thanks for debugging!

[strafeOK]

Awesome! It makes sense doing it that way, I can't imagine much could go wrong if it's using that data to set values and it works on Safari which is great! Pleasure helping out.

[shshaw]

From Slack:

First test sanity check — looks like Safari does fine setting/using the unit-less custom props generally, and specifically in repeat()s…. https://codepen.io/eeeps/pen/oPjNVN

And in testing with that simplified example, it's not an issue with strings in the CSS Vars either.

[shshaw]

Some more discoveries:

.cell-grid { height: 100% } doesn’t seem to be filling the height of the container. If you set that to a fixed unit, it works. Any known issues & fixes with Safari, CSS Grid & height: 100%? Couldn’t find it on https://github.com/rachelandrew/gridbugs Okay… what in the world. As long as .cell-grid or .splitting has any kind of height other than auto, it works.