Why Safari doesn't render CSS correctly?

[Webflow - Atakan Bacaksiz — Product Designer](https://Read only link)

Safari: (Bug)

Chrome: (Normal)

Hi @atakan the reason is that Safari doesn’t lie when is something set incorrectly compare to Chrome that will test your code and try to fix it. Simple like that. :man_shrugging:

In your case you should not use grid row height to auto but instead you should set correct value that is 1fr

If you willing to understand you can refer to MDN to learn what is fr unit and how this unit works. You can also refer to CSS Grid docs.

EDIT: As long time Apple products user I use predominately Safari when viewing results, then Mozilla (for Grid) and if I really need I open Chrome (animations). Means I use different browser for different things. When it works in Safari it will work in other browsers. There are of course some exceptions as are in Chrome, or Mozilla but generally speaking this is the way.

1 Like

Thank you @Stan! I know what fr is but I missed that one. Thank you for reminding me!

1 Like