html - Safari image height in CSS grid

Question

I have issues in mobile safari, where an image is exceeding the grid height. Chrome is working fine... Here how it looks like in Chrome:

And how it looks like on my iPhone:

Following is my code (simplified):

          <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>

Styling with height 100% and max-height did not work. Also flex-direction: "column" and padding-top: "100%" are not working.

Any more ideas how it will work in both browsers?

question from:https://stackoverflow.com/questions/65846644/safari-image-height-in-css-grid

Answer 1

• It's bug on mobile safari. Described here: tweet
• Check this out: github repo