Safari 16, STP 153 on Monterey https://hariharalaya.com/faculty/ Scroll down and mouse over the cards. There are two viewport breakpoints to check out-- on a more narrow viewport the card edges overlap. On a wider viewport there is proper spacing on all sides. When the card flips to the other side part of the picture is rendered improperly. Sometimes there is flickering during the animation. In the wider viewport the last column of cards flicker. In the more narrow viewport the second and last columns flicker for me. This does not happen on Chrome or Firefox.
This is not a recent regression, a build from Feb 1 already shows the issue.
So does Safari 15.6.1.
There are coplanar layers which are intersecting and z-fighting. This is related to 3d transforms interop.
Created attachment 462490 [details] rendering in Safari, firefox There are a couple of layout issues. There is the Ghost face image staying visible on Safari, but there's also the stack of car with photos and shadows at the wrong place.
The image not being at the top is due to ```css .cfb_wrapper .flipbox-front-layout { background: #fff; border-radius: 8px; -webkit-box-shadow: 0 0 8px 4px rgba(0, 0, 0, .05); -moz-box-shadow: 0 0 8px 4px rgba(0, 0, 0, .05); box-shadow: 0 0 8px 4px rgba(0, 0, 0, .05); padding: 30px 0; height: 100%; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; } ``` removing the `align-content: center;` puts the image at the top. But I wonder why it has no effect on Firefox. The intent seems to be centered but the layout in Firefox is better. Bug in Firefox which ends up being the desire layout or something else? to note this doesn't solve the issue for flipped image.
<rdar://problem/100280625>
The initial layout has disappeared.
There is no copy of the layout or a reduced testcase. It tried to recover from web.archive, but there isn't the right content. This is not actionable anymore. The window was missed. :(