What could be causing the issue of frozen background videos when navigating back to a portfolio website in Webflow, specifically on Safari and iOS?
TL;DR
- Safari and iOS aggressively suspend background videos and may not resume them due to autoplay restrictions, bfcache behavior, and missing video attributes like muted, autoplay, and playsinline.
- Fix by ensuring proper video tag attributes and adding JavaScript to handle visibility changes or the pageshow event to reinitialize video playback.
Frozen background videos when returning to a Webflow portfolio site in Safari or iOS are commonly caused by browser-specific limitations and resource-saving behaviors.
1. Browser Resource Management
- Safari (both macOS and iOS) aggressively suspends or unloads media elements like background videos when the page is pushed to the background or when navigating away.
- On iOS, WKWebView-based rendering (used by Safari and all webviews on iOS) often unloads HTML5 video elements to reduce memory usage.
2. Autoplay Restrictions
- iOS and Safari restrict autoplay of media with sound, or sometimes even muted videos when returning to a page.
- Even if the video tag is set to autoplay and muted, Safari may still pause the video or fail to resume playback after a back-navigation.
3. Page Cache Restoration (Back-Forward Cache)
- When navigating back via the browser’s back button, Safari may restore the page using the bfcache (Back-Forward Cache), skipping the normal page load event.
- This means JavaScript reinitialization or video restarts may not occur, leaving the video in a frozen state.
4. Lazy Loading or DOM Manipulation Issues
- If the background video is loaded via Webflow interactions or lazy loading, it might not re-trigger properly when returning via browser history.
- Video elements can also freeze if managed by interactions that don’t reinitialize after the page is bfcache-restored.
5. Incorrect Video Tag Markup or Attributes
- Missing attributes such as muted, playsinline, or autoplay can prevent videos from auto-resuming.
- Safari often requires video playsinline for proper mobile execution, especially in background usage.
6. No Event Listener for Visibility Changes
- Without a visibilitychange event listener or proper detection, the site may not handle resuming playback when the tab or browser window becomes active again.
Summary
The frozen background video issue in Safari and iOS is typically due to aggressive resource handling, autoplay limitations, and how bfcache affects media elements. To resolve it, ensure your video has all required attributes (muted, autoplay, playsinline) and consider using JavaScript to detect visibility changes or the pageshow event to programmatically restart playback after navigation.