Bug 245231

Summary: Flip animation flickers and shows back face inappropriately on hariharalaya.com
Product: WebKit Reporter: Jon Lee <jonlee554>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: dino, graouts, graouts, karlcow, mattwoodrow, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
rendering in Safari, firefox none

Description Jon Lee 2022-09-15 10:01:07 PDT 
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.
Comment 1 Antoine Quint 2022-09-15 11:41:12 PDT 
This is not a recent regression, a build from Feb 1 already shows the issue.
Comment 2 Alexey Proskuryakov 2022-09-15 18:32:07 PDT 
So does Safari 15.6.1.
Comment 3 Simon Fraser (smfr) 2022-09-15 20:21:30 PDT 
There are coplanar layers which are intersecting and z-fighting. This is related to 3d transforms interop.
Comment 4 Karl Dubost 2022-09-21 01:28:09 PDT 
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.
Comment 5 Karl Dubost 2022-09-21 01:40:37 PDT 
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.
Comment 6 Radar WebKit Bug Importer 2022-09-22 10:02:23 PDT 
<rdar://problem/100280625>
Comment 7 Karl Dubost 2024-07-03 03:09:24 PDT 
The initial layout has disappeared.
Comment 8 Karl Dubost 2024-07-03 16:11:25 PDT 
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. :(