I’m having a weird issue with Google Docs viewer embedded in my webpage. Occasionally the document doesn’t appear at all when the page loads. The iframe just stays completely empty. But if I resize my browser window even slightly, the document suddenly shows up perfectly.
This doesn’t happen every time, which makes it really frustrating to debug. When I test the same Google Docs URL directly in a new browser tab, it works fine every time.
Sometimes the iframe loads but shows nothing until I trigger a window resize event. Has anyone experienced this before? What could be causing this rendering issue?
This is a race condition between your iframe loading and Google’s viewer. I’ve hit this exact bug before - adding an onload event handler to the iframe fixes it. What’s happening: your page loads before Google’s viewer initializes inside the iframe. Window resizing works because it forces a redraw that makes the viewer render properly. Skip the timeouts and display tricks. Instead, wrap your iframe in a container div and use CSS visibility instead of display for any refreshes. Also try adding loading=‘lazy’ to your iframe - weird but it sometimes gives Google’s viewer enough time to initialize before rendering the document.
Had the same issue. Google’s viewer gets wonky with iframe timing - that’s why the resize trick works. It forces the iframe to recalculate and refresh. You can fake this programmatically instead of waiting for a real resize. Set the iframe’s display to ‘none’, wait a beat, then switch it back to ‘block’. Or just bump the height by 1px and change it back. Both simulate the resize without user interaction. Also try adding a timestamp parameter to your Google viewer URL - sometimes it’s just a caching problem causing the blank screen.