Bug 272662

Summary: [view-transitions] Breakages in demos
Product: WebKit Reporter: Jake Archibald <jaffathecake>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED MOVED    
Severity: Normal CC: bramus, graouts, ntim, rik, webkit-bug-importer, webkit
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 272713, 273065, 273649    
Bug Blocks: 259055    
Attachments:
Description Flags
Video of issue none

Jake Archibald
Reported 2024-04-15 01:43:26 PDT
A lot of my simple demos didn't work in Safari due to a lack of the navigation API. I've hacked around that, but many of them aren't rendering properly. https://bugs.webkit.org/show_bug.cgi?id=272661 is one of the simple reduced cases, but here are others that I think are hitting different bugs: In all demos, click the "page 2" / "page 1" link. See Chrome for the correct behaviour. https://simple-set-demos.glitch.me/batman-transition/ - the background is supposed to spin, but doesn't in Safari. https://simple-set-demos.glitch.me/bounce/ - the new content is supposed to bounce in, but in Safari it moves… incorrectly. https://simple-set-demos.glitch.me/dialog/ - (click the open a dialog button) in Chrome the dialog slowly fades in, in Safari it just appears. https://simple-set-demos.glitch.me/dust-no-raf/ - the dust flickers in Safari https://simple-set-demos.glitch.me/gross-3d-transition/ - the page is supposed to move in 3d space, but doesn't in Safari https://simple-set-demos.glitch.me/gross-cube-transition/ - the page is supposed to animate as a cube https://simple-set-demos.glitch.me/simple-element-change/ - (click the toggle button) the element gets clipped in weird ways
Attachments
Video of issue (1.83 MB, video/mp4)
2024-04-16 01:50 PDT, Jake Archibald 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Tim Nguyen (:ntim)
Comment 1 2024-04-15 10:25:07 PDT
Thanks for reporting! The testcases are really helpful, we'll take a look! > https://simple-set-demos.glitch.me/dialog/ - (click the open a dialog button) in Chrome the dialog slowly fades in, in Safari it just appears. That's bug 265169. > https://simple-set-demos.glitch.me/batman-transition/ - the background is supposed to spin, but doesn't in Safari. I don't see any background spinning in Chrome either, the animation looks identical on a recent WebKit build. > https://simple-set-demos.glitch.me/simple-element-change/ - (click the toggle button) the element gets clipped in weird ways This one was fixed recently (I think by bug 272496).
Jake Archibald
Comment 2 2024-04-16 01:49:59 PDT
> > https://simple-set-demos.glitch.me/batman-transition/ - the background is supposed to spin, but doesn't in Safari. > I don't see any background spinning in Chrome either, the animation looks identical on a recent WebKit build. Oh, err, sorry about that! I guess Chrome 'fixed' how they handle that bit of CSS since I published the demo. I've fixed the demo, and it _almost_ works correctly in Safari, but it shows a flash of the final frame in a way Chrome doesn't. See the attached video. This is probably https://bugs.webkit.org/show_bug.cgi?id=270672.
Jake Archibald
Comment 3 2024-04-16 01:50:19 PDT
Created attachment 470934 [details] Video of issue
Antoine Quint
Comment 4 2024-04-22 05:48:11 PDT
Filed bug 273065 for https://simple-set-demos.glitch.me/bounce/.
Tim Nguyen (:ntim)
Comment 5 2024-04-22 08:29:52 PDT
> https://simple-set-demos.glitch.me/gross-3d-transition/ - the page is supposed to move in 3d space, but doesn't in Safari > https://simple-set-demos.glitch.me/gross-cube-transition/ - the page is supposed to animate as a cube Bug 272713 fixed those fwiw.
Radar WebKit Bug Importer
Comment 6 2024-04-22 08:54:22 PDT
<rdar://problem/126863754>
Tim Nguyen (:ntim)
Comment 7 2024-05-02 18:23:10 PDT
I'm going to resolve this because most of the issues have been tracked/fixed elsewhere. Thanks for reporting these issues! > https://simple-set-demos.glitch.me/batman-transition/ Bug 270672 > https://simple-set-demos.glitch.me/bounce/ - the new content is supposed to bounce in, but in Safari it moves… incorrectly. bug 273065 > https://simple-set-demos.glitch.me/dialog/ - (click the open a dialog button) in Chrome the dialog slowly fades in, in Safari it just appears. bug 265169 > https://simple-set-demos.glitch.me/dust-no-raf/ - the dust flickers in Safari bug 273649 > https://simple-set-demos.glitch.me/gross-3d-transition/ - the page is supposed to move in 3d space, but doesn't in Safari > https://simple-set-demos.glitch.me/gross-cube-transition/ - the page is supposed to animate as a cube Bug 272713 > https://simple-set-demos.glitch.me/simple-element-change/ - (click the toggle button) the element gets clipped in weird ways bug 272496 (+other bugs?)
Note You need to log in before you can comment on or make changes to this bug.