Having trouble in mobile safari with an image exceeding the grid height, but Chrome is displaying fine... This is how it appears in Chrome:
https://i.sstatic.net/m4Q1xm.png
Here’s how it looks on my iPhone:
https://i.sstatic.net/EMWPzl.png
This is a simplified version of my code:
<div
style={{
gridTemplateColumns: '25% 55% 20%',
display: 'grid',
minHeight: '20vh'
}}
>
<img
src={this.props.parent.sliderPhotos[0]}
style={{
objectFit: 'cover',
width: '100%',
height: '100%'
}}
/>
<div
style={{
backgroundColor: 'yellow',
}}
></div>
<div
style={{
backgroundColor: 'red',
}}
></div>
</div>
Trying to style with height 100% and max-height has not been successful. Also flex-direction: "column" and padding-top: "100%" have not worked.
Any suggestions on how to make this compatible with both browsers?