search

rachelandrew / gridbugs

A curated list of Grid interop issues
MIT License
1.18k stars 25 forks source link

Height bug in Chrome and Safari #15

Open kidwm opened 7 years ago

kidwm commented 7 years ago

See https://codepen.io/kidwm/pen/prKMQV

screen shot 2017-08-24 at 6 21 46 pm

kidwm commented 7 years ago

https://codepen.io/anon/pen/Ojarba

I've found out that adding grid-template-columns would fix this issue, but didn't know why.

rachelandrew commented 6 years ago

Apologies for the delay in replying to you - it appears to be related to the percentage padding. If you instead use a fixed length unit there, the layout I assume you were expecting (with the footer below the list) works.

In your example, which I reduced to remove the Sass: https://codepen.io/rachelandrew/pen/gGgbyY?editors=1100 I think adding the single column grid is giving Chrome something to resolve the percentage against.

I wondered if the generated content was the issue but we see the same happening if we nest a grid https://codepen.io/rachelandrew/pen/gGgbyY?editors=1100

There are interop issues with percentage margin and padding anyway, logged here https://github.com/rachelandrew/gridbugs#13-inconsistency-with-percentage-padding-and-margins

and also issues with resolving heights in intrinsic tracks https://bugs.chromium.org/p/chromium/issues/detail?id=750726

Perhaps @mrego has further insights.

mrego commented 6 years ago

and also issues with resolving heights in intrinsic tracks https://bugs.chromium.org/p/chromium/issues/detail?id=750726

Yeah I believe it's due to that Chrome bug.