Bug 245231 – Flip animation flickers and shows back face inappropriately on hariharalaya.com

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

[Jon Lee]

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.

[Antoine Quint]

This is not a recent regression, a build from Feb 1 already shows the issue.

[Alexey Proskuryakov]

So does Safari 15.6.1.

[Simon Fraser (smfr)]

There are coplanar layers which are intersecting and z-fighting. This is related to 3d transforms interop.

[Karl Dubost]

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.

[Karl Dubost]

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.

[Radar WebKit Bug Importer]

<rdar://problem/100280625>

[Karl Dubost]

The initial layout has disappeared.

[Karl Dubost]

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. :(