I want to start by mentioning that I have seen and read this question, so I know that Safari (and iOS) handle the height property differently than Chrome. This problem does however feel a bit different. Anyways:
I have a list of items that is styled with flexbox. Each entry is a grid containing various types of information. However, each entry also consists of an image that is positioned absolutely in relation the grid so that it sticks out a bit to the left. An example of how this works can be found here. This works fine in Chrome and looks as expected, but things look weird in Safari. Even though Safari does not use the grid container as a relative height for the image (which has a property of height: 80%), the image seems to align well with the grid. However, all other entries are aligned with the entire body of the page. When inspecting the grid, it doesn't look like it takes up the entire page, yet the other components seem to think that it does.
Why is it that the image looks OK whereas the other components do not? Furthermore, does anybody know a way of solving this problem? I would prefer if the image height could remain as a percentage because i want to re-use the component in other parts of my code.
Thank you.
EDIT: Here are images that show the difference between Chrome and Safari, from the example JSFiddle.
Chrome:
Safari:
EDIT 2: I still don't know why this happens (and I'm intrigued to find out why), but I did figure out a solution to the problem. By setting a specific height for the list entry (i.e. by using grid-template-rows: 50px; for instance), the image size is correctly scaled to the grid row, and the other components are placed correctly.
