Add layout thrashing guide with real-world GSAP bug case study

[matiasperz]

Summary

Add a comprehensive guide documenting layout thrashing—a critical performance issue where JavaScript forces synchronous layout recalculations. The guide includes a real bug we discovered and fixed in our codebase involving GSAP animations and SVG DOM updates.

Key Changes

• New content file: content/logs/09-wtf-is-layout-thrashing.mdx
  • Explains how browser rendering pipeline works and when forced reflows occur
  • Documents common DOM operations that trigger layout invalidation and reads
  • Details a real production bug: 674 forced reflows in 11 seconds caused by animating CSS top property while SVG paths were being updated
  • Shows the exact problematic code and the fix (replacing top/left with GSAP's y/x which use transform: translate())
  • Provides practical rules of thumb for avoiding layout thrashing
  • Includes DevTools debugging steps to identify thrashing in the wild

Notable Implementation Details

• Uses a flowchart diagram to visualize the thrashing cycle in the real bug
• Includes side-by-side code comparisons showing problematic vs. fixed patterns
• Provides a reference table comparing layout-triggering properties vs. compositor-friendly alternatives
• Explains why the fix works: transforms don't require layout recalculation, unlike positioned properties
• Emphasizes that the SVG write wasn't the problem—it was the subsequent layout-dependent read that forced the reflow

https://claude.ai/code/session_01MVjb1XFW37rx3xo8WKMFtZ

Greptile Summary

Adds a comprehensive guide on layout thrashing—a critical browser performance issue where JavaScript forces synchronous layout recalculations. The post documents a real production bug discovered in the codebase where GSAP animations triggered 674 forced reflows in 11 seconds.

Key highlights:

• Clear explanation of browser rendering pipeline and forced reflows
• Real-world bug case study: animating CSS top property while updating SVG paths
• Solution: replacing top/left with GSAP's y/x (which use transform: translate())
• Practical rules with code examples: batch reads before writes, prefer transforms over layout properties
• DevTools debugging steps for identifying thrashing

The content is well-structured with flowcharts, code comparisons, and a reference table. Technical accuracy is solid—correctly explains why transforms don't require layout recalculation while positioned properties do.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• This PR adds a single documentation file with no code changes to the application. The content is technically accurate, well-written, and follows the established format of other log posts in the repository. There are no security concerns, breaking changes, or functional modifications.
• No files require special attention

Important Files Changed

Filename	Overview
content/logs/09-wtf-is-layout-thrashing.mdx	Added comprehensive layout thrashing guide with real GSAP bug case study, excellent technical depth and practical debugging steps

_{Last reviewed commit: 3652e47}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
joyco-hub	Ready	Preview, Comment	Feb 24, 2026 1:46am