ARTICLE AD BOX
I am architecting a frontend wrapper to integrate third-party HTML5/WebGL demos into a portal. Due to strict security policies, the external app runs inside an iframe hosted on a different domain. I need the parent window to dynamically resize the iframe based on the internal WebGL canvas aspect ratio when the user rotates their device.
The Problem: When the iframe initially loads, basic postMessage payloads (like loaded, volume, and balance states) are received perfectly across all browsers. You can verify this behavior in my staging sandbox here: https://bullrushpokies.com/sandbox/iframe-resize-bug/ (Note: This cannot be reproduced in JSFiddle due to custom cross-domain security policies on the provider's CDN).
However, when testing on iOS Safari with "Prevent Cross-Site Tracking" enabled, if the user rotates the device, the specific resize events triggered by the WebGL canvas are either heavily throttled or dropped entirely. Chrome on Android handles the exact same rotation and receives the resize payload without issues.
Here is the parent window listener logic running on that page:
window.addEventListener("message", (event) => { // Basic validation if (!event.origin.includes("konamigaming.online")) { return; } try { const payload = typeof event.data === 'string' ? JSON.parse(event.data) : event.data; // These basic events arrive perfectly in Safari: if (payload.event === "loaded") { console.log("Game initialized"); } // This specific event is completely dropped during iOS Safari orientation change: if (payload.event === "CANVAS_RESIZE") { const iframe = document.getElementById("game-frame"); iframe.style.height = `${payload.height}px`; } } catch (err) { console.error("Parse error", err); } }, false);Safari seems to treat the sudden burst of postMessage events during an orientationchange from a cross-origin iframe as a tracking attempt if the aspect ratio data is passed.
Is there a standard workaround for receiving legitimate UI/resize events from a sandboxed iframe without triggering Safari's tracking protection? Should I establish a two-way MessageChannel port upon initialization instead of relying on basic window.parent.postMessage?
