Skateside
commented
7 years ago I've been suffering from this same problem. It seems that Safari can't work out the height of the element if the height is something abstract like auto or an fr amount. Setting it to a known height seems to be a work around.
https://codepen.io/anon/pen/YrpMgg
It seems that the known height can be something complicated like a calc() (in my case, I was able to use calc(100vh - 5em)).
It's far from ideal, but heights of auto or fr units seem to be the cause of the bug
gsnedders
martinduo
Hello,
I think I’ve found a bug in iOS browsers when rendering CSS Grid Layouts. So, I thought I would submit it here. I have created a CodePen to demonstrate the bug.
https://codepen.io/martinduo/pen/GvOWqX/
The Pen renders a 1-column, 1-row, single area grid that contains a single cell with 20 lines of text in a element flagged as overflow:auto.
Running the Pen in iOS v10.3.3 on the iPad using Safari renders the cell showing all 20 text lines, no scrolling is triggered. This is also the same error seen using Chrome v60.3112.19 or Firefox v8.2 on the iPad.
Running this Pen on OSX v10.11.6, using Firefox (not Safari or Chrome) renders the cell correctly showing only the first few text lines with scrolling enabled to see the other lines.
Running this Pen on Win10 v1703, or Android v7.1.2, using Chrome, or Firefox renders the cell correctly showing only the first few text lines with scrolling enabled to see the other lines.
I have not found a workaround to fix this Pen code, but I did find a workaround in my full-blown project code in iPad portrait mode, with 3 rows in 1 column. There I could fix this by changing: “grid-template-rows: 1fr 54px 1fr;” to: “grid-template-rows: minmax(200px, 1fr) 54px minmax(200px, 1fr);”.
Interestingly, when in iPad landscape mode, with a media query switch to 2 rows in 2 columns, the error never did show up in my project code.
Bruce Martin