Post

Chrome for Developers
@developer.chrome.com

Your prompt: "Add a modal that smoothly slides into view and fades out when closed." Unguided coding agent: Custom <div>, z-index: 9999, and JS setTimeout unmount hacks. Guided coding agent: Native <dialog> with @starting-style, overlay, and allow-discrete transitions.

0 reposts11 likes

Jake Archibald
@jakearchibald.com

@rviscomi.dev am I right that the "unguided agent" has produced a modal that animates in & out in all browsers, but with the power of Google's Modern Web Guidance it has used a pattern that only animated out in Chrome?

Paweł Grzybek
@pawelgrzybek.com

This was my experience. I literally did that a few days ago. The initial version it produced works only on Google Chrome, and only after telling agent that it is not behaving the same in FF and Safari it added TONNES of fallbacks here and there.

Barry Pollard
@tunetheweb.com

Not my area of expertise but looks like this was spotted and corrected two weeks ago: github.com/GoogleChrome... Maybe not in the latest version yet? Or are those fallbacks that were added not correct?

github.com🤖 fix(guides): update discrete display transition detection and top-layer exit fallbacks by rviscomi · Pull Request #1624 · GoogleChrome/modern-web-guidance-src🤖 Fixes #1623 Summary features/transition-behavior.md: Extract shared fallback guidance for transition-behavior, including {{ BASELINE_STATUS(&quot;transition-behavior&quot;, &quot;css.properties...
Tara Ojo Agyemang
@taraojo.bsky.social

Thanks for sharing, that's definitely an issue! Can I ask how you installed modern web guidance? Wondering if you're on a version without the fix, you may need to manually update

Rick Viscomi
@rviscomi.dev

Yes, we had a bug in the guidance at the time this video was recorded a few weeks ago, but it has since been fixed. I also noticed the bug in the video yesterday and requested a correction, which should be coming soon. But thanks for pointing it out.

Rick Viscomi
@rviscomi.dev

Yes, I found and fixed the bug in the guidance but didn't connect the dots with the video someone else on my team had already recorded until it was already published. My mistake.

BenchSmoke
@benchsmoke.bsky.social

The native dialog version is also easier to check by hand. A quick pass for Escape to close and focus returning to the trigger tends to expose the gaps in div-and-setTimeout versions.

Chrome for Developers
@developer.chrome.com

Correction: since this video was recorded, MWG has been updated to improve cross-browser compatibility. allow-discrete shouldn't be used in the transition shorthand; set it separately in transition-behavior so older browsers don't drop the whole transition.

Rick Viscomi
@rviscomi.dev

I drafted the text above yesterday, and re-reading it now I should have said "unsupported browsers" rather than "older browsers" 💙