/* =============================================================================
   IzeChat — Feed rendering-performance layer (isolated, additive)
   -----------------------------------------------------------------------------
   Pure rendering optimisation for the WebView feed. NO visual change to any
   on-screen post: the only rule here is a skip class that ize-feed-perf.js adds
   exclusively to post cards that are several screens away from the viewport and
   removes again before they scroll into view — so a visible/interactive post is
   never contained, never clipped, never re-laid-out differently.

   What it buys: the browser skips layout + paint for the large DOM subtrees of
   off-screen posts (big image posts, the WPC banner, the reels/people rows),
   which is the main cause of the "UI thread stalls when large content enters the
   viewport" symptom — the engine no longer pays to lay those out until they are
   actually approaching the screen.
   ========================================================================== */

/* Off-screen post cards: skip their rendering work entirely.
   - content-visibility:auto  → the engine treats the subtree as not-rendered
     while it is far off-screen, then renders it lazily as it nears the viewport.
   - contain-intrinsic-size: auto 600px → reserves a stable placeholder height so
     the scrollbar/anchor never jump. The `auto` keyword makes the browser
     REMEMBER each card's real rendered height after it has been seen once, so
     scrolling back up lands exactly where it should (no jump, no rebuild feel). */
#posts .ize-cv-skip {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* The reels / people-you-may-know horizontal strips are GPU-composited scrollers.
   Promoting them to their own layer keeps their horizontal scroll off the main
   thread and stops their repaint from invalidating the vertical feed around them.
   (Applies to the existing markup only — no size/appearance change.) */
#posts .tag_feed_reels_container,
#posts .sidebar-users-may-know-container,
#posts .tag_feed_groups_container,
#posts .tag_scroll {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}