Addressed inconsistencies in media loading behavior between keyboard navigation and wheel scrolling on a frontend page. The issue resulted in media elements failing to load during fast arrow key scrolling, despite being in the viewport.

Issue

Media elements failed to load when using arrow key navigation for scrolling, while wheel scrolling worked correctly. Visible media elements remained unloaded even when in the viewport, creating an inconsistent user experience between different navigation methods.

Culprit

The lazy loading system aggressively optimized for programmatic scrolling by skipping media elements during intermediate sections. This optimization assumed that all programmatic scrolling was intentional navigation (e.g., menu clicks) and did not account for continuous scrolling via arrow keys.

Solution

Modified the lazy loading logic to prioritize viewport visibility over scroll state. This involved:

Visibility-Based Loading

Adjusted the lazy loading system to load media elements that are visible in the viewport, regardless of scroll state. This ensured that visible elements were loaded even during fast arrow key scrolling.

Scroll State Synchronization

Added synchronization between keyboard and wheel scrolling events to ensure consistent handling of scroll states, preventing skipped elements from accumulating during rapid navigation.

Results: Arrow key navigation now behaves consistently with wheel scrolling, with media elements loading properly when in the viewport. The solution maintains performance optimizations for non-visible content while ensuring a consistent user experience across all navigation methods.