Bug 290036 – Image column in CSS grid resizes incorrectly and does not shrink back

• Status: NEW
• Component: Layout and Rendering

Created attachment 474625 [details]
A video demo of the bug

When using grid-template-columns: min-content 4fr in CSS Grid, an image inside the min-content column resizes as expected when the grid container gets smaller. However, when resizing the container back to a larger size, the image does not shrink back, even when the text inside the adjacent column's content wraps back to a single line.

This behavior occurs only in Safari, and works correctly in Chrome (Firefox is another story and some something else wrong). It seems that Safari fails to properly recalculate the intrinsic size of the min-content column when expanding back after a shrink event.

Here is a live demo, because I cant explain this properly
https://codepen.io/treffendharm/pen/ByarQKd

(In reply to harm from comment #0)
> Created attachment 474625 [details]
> A video demo of the bug
> 
> When using grid-template-columns: min-content 4fr in CSS Grid, an image
> inside the min-content column resizes as expected when the grid container
> gets smaller. However, when resizing the container back to a larger size,
> the image does not shrink back, even when the text inside the adjacent
> column's content wraps back to a single line.
> 
> This behavior occurs only in Safari, and works correctly in Chrome (Firefox
> is another story and some something else wrong). It seems that Safari fails
> to properly recalculate the intrinsic size of the min-content column when
> expanding back after a shrink event.
> 
> Here is a live demo, because I cant explain this properly
> https://codepen.io/treffendharm/pen/ByarQKd

[Karl Dubost]

Created attachment 474666 [details]
rendering in safari, firefox, chrome

So this is the moment the icon grows on Safari and Chrome
when reducing the window a bit more
* Chrome the icon takes back its normal size
* Safari the icon stays big

On Firefox the layout is messed up all the steps.

[Karl Dubost]

```
.direct-contact-wrapper li {
    display: grid;
    gap: 2.31rem;
    grid-template-columns: min-content 4fr;
    grid-template-rows: auto;
    align-items: center;
    transform: translateZ(0);
}
```

```
.direct-contact-wrapper .image {
    border-radius: 50%;
    height: 100%;
    aspect-ratio: 1;
    overflow: clip;
    min-width: 0;
    min-height: auto;
}
```

```
.direct-contact-wrapper .image img {
    scale: 1.9;
    -o-object-position: top;
    object-position: top;
}
```

Note the -o- is not necessary anymore… this is for Opera Presto which doesn't exist anymore.


with 

```
<li>
					<div class="image">
						<img width="200" height="300" src="https://picsum.photos/id/237/200/300" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" srcset="https://picsum.photos/id/237/200/300 200w, https://picsum.photos/id/237/683/1024 683w, https://picsum.photos/id/237/768/1152 768w, https://picsum.photos/id/237/1024/1536 1024w, https://picsum.photos/id/237/1366/2048 1366w, https://picsum.photos/id/237/1500/2250 1500w, https://picsum.photos/id/237/1707/2560 1707w" sizes="auto, (max-width: 200px) 100vw, 200px">
					</div>
					<div class="quick-contact-info">
						<div class="name">Alexander Harrison Wellington</div>
						<div class="function">Founder</div>
						<a class="email" href="mailto:[e-mail]">[e-mail]</a>
					</div>
				</li>
```



interesting toggling the on/off the "height: 100%" on 

```
.direct-contact-wrapper .image {
    border-radius: 50%;
    height: 100%;
    aspect-ratio: 1;
    overflow: clip;
    min-width: 0;
    min-height: auto;
}
```

gives it the correct size.

[Radar WebKit Bug Importer]

<rdar://problem/147916207>