Bug 290036

(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

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.

``` .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:alexander@example.com">alexander@example.com</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.

<rdar://problem/147916207>