AMP-video-docking在iOS端Google AMP Cache环境下失效问题问询

Let’s walk through practical, actionable steps to debug why the video docking effect isn’t working as expected:

• Validate Your Component Setup First
  Start by confirming your AMP page adheres to all amp-video-dock requirements:

  • Ensure your <amp-video> tag includes the dock attribute (e.g., <amp-video dock width="640" height="360" ...>)
  • Verify the amp-video-dock script is properly added to your page’s <head>: <script async custom-element="amp-video-dock" src="https://cdn.ampproject.org/v0/amp-video-dock-0.1.js"></script>
  • Check that your video meets the minimum size threshold—AMP requires videos to be at least 400x300px for docking functionality to activate.

• Test the Original (Non-Cached) AMP Page
  Load your AMP page directly (not through the Google AMP Cache) on iOS/Safari. If docking works here but fails on the cached version, the problem is likely tied to how the AMP Cache processes the component. If it fails on both, you’re dealing with a broader iOS/Safari compatibility bug with amp-video-dock.

• Inspect the Cached Page with Safari Dev Tools
  Use Safari’s Web Inspector to dig into the cached page’s behavior:

  1. Connect your iOS device to a Mac, enable Web Inspector on both the device and desktop Safari.
  2. Load the cached AMP page, then inspect the amp-video-dock element—check if it’s rendered correctly, or if CSS styles from the cache are overriding its positioning.
  3. Scan the JavaScript console for errors related to amp-video-dock or video playback. The AMP Cache might be serving a modified component build that has iOS-specific bugs.

• Check Component Versions in the Cache
  The Google AMP Cache sometimes serves different versions of AMP components. Look at the amp-video-dock script tag in the cached page’s <head>—note the version/hash in the URL. Compare this to the version used in your original page or the AMP Docs demo. Also, keep in mind that enabling the video-dock experiment in your local browser doesn’t affect the cache’s configuration.

• Rule Out iOS Safari-Specific Interferences
  iOS Safari has unique settings that can break video features:

  • Disable Low Power Mode (it throttles JavaScript, which can disrupt docking logic)
  • Turn off any Content Blockers to eliminate script interference
  • Test in Private Browsing Mode to rule out cached data or extension conflicts

• Test Across Different iOS Versions
  The issue might be limited to specific iOS releases. Test on multiple versions (e.g., iOS 16, iOS 17) to see if the problem is widespread or isolated. AMP components often get version-specific compatibility fixes, so this can narrow down the root cause.

• Report the Bug to the AMP Project
  If you confirm the issue is specific to the Google AMP Cache on iOS/Safari, file a bug report in the AMP GitHub repository. Include:

  • Links to both the cached and original AMP pages
  • Exact iOS and Safari version details
  • Screenshots of the issue and any console errors
  • Step-by-step reproduction instructions

内容的提问来源于stack exchange，提问作者Binipro