Chrome prerender breaks page

[Ian]

Hi, when I navigate to brocktonschool.com, everything looks the way it should.  But if I first do a Google search on Chrome for "Brockton School", and then hit the the top link which is www.brocktonschool.com,  the home page is not rendered correctly.  

It's the top link for me because I go there a lot, it shows me sitelinks etc.  I'm not sure how someone else can simulate the prerender process, unless they repeatedly go to that site.

I can't use developer tools to troubleshoot this.  It works in all other browsers.  The problem occurs on both Chrome in Windows and Macbook.

Does anyone have any tips on how to troubleshoot prerender issues?

[Philip Tellis]

reproducible by searching Brockton School Vancouver

To unsubscribe from this group and stop receiving emails from it, send an email to prerender+...@chromium.org.

--

hello world

 

[Dominic Hamon]

I could also reproduce the issue by searching, and from http://prerender-test.appspot.com.

Dominic Hamon | Google

[Matt Menke]

Looks like the width of the page is wrong, and the CSS isn't properly applied when prerendering.  Resizing the window fixes the issues, as does showing devtools.  Rather inconveniently, showing devtools disables prerender, which does make it rather difficult to debug.

If you open links to http://www.brocktonschool.com/ in a new background tab, you see the exact same behavior.  If you start loading in a background tab, but quickly focus it before the tab makes much progress loading the site, it renders correctly. so the problem isn't specific to prerender, it's loading the page in a background/non-visible tab (Which is a bit like prerender in some ways, but very different in others).

My suggestion for debugging:  Open a windows two two tabs.  Open devtools.  Navigate the tab showing devtools to http://www.brocktonschool.com/.  Quickly switch to the other tab, and wait for the hiddent tab to finish loading.  Switch back, and you should have the page incorrectly rendered, and devtools running.

I'm not sure if this is a Chrome bug or an issue with the site.

[Philip Tellis]

Might be the tag at the top that says `viewport` width is 1000

--

hello world

 

[Ian Macfarlane]

Okay, I've narrowed it down, I'm using a javascript script detect-zoom.js which tell me if the window is currently being zoomed using the browser zoom in-out feature.  I need to know this during the window resize event because otherwise my resizing code doesn't work.

For some reason, during the prerender process my code doesn't like what it gets back from detect-zoom.js.  Matt, you're right, the background tab exactly duplicates the problem, I'm now going to try to troubleshoot it using your approach.

 

[Matt Menke]

Please tell us if detect-zoom is having trouble with some anomalous state.  I'm not familiar with the zooming Javascript APIs, but could easily see them having issues in background windows.

[Ian Macfarlane]

Hi guys, thanks for all the tips.  

Chrome couldn't handle the code to detect zoom level in a background window, so I've added code to detect whether the page is currently hidden (document.hidden, document.mozHidden etc.): if the page is hidden, I no longer check zoom level.

- Ian