iOS Safari not rendering the complete page from the first time

Question

We have a website that is rendering well on all browsers and devices, except only the first time you open it in Safari mobile ( or Safari Mac on narrow screens ).

Website: http://sheriff.org/

Reproduce on iPhone Safari:

1. Open the website in private mode
2. Refresh the page

Reproduce on Safari for Mac:

1. Open Safari in private mode
2. Switch User Agent to iOS - iPhone ( Develop > User Agent > Safari -- iOS -- iPhone )
3. Resize the browser to have an approximate of a mobile device width
4. Open the website
5. Refresh the page

Expected: Page should render the same first and second time

Actual: For the first time in private mode, only a green box is visible The second time, page renders completely

Findings: I tried to compare both pages (when it renders correctly, and when the render is broken), to see if there are any difference, to find out that in both cases, the page has the exact same HTML & CSS.

If you inspect any of the elements that are not shown on the first attempt ( which supposed to render correctly after page refresh), you won't find any style that is affecting the element's visibility (like opacity, display, visibility, position, ...etc)

UPDATE: It seems that there's an error in Safari Console Unhandled Promise Rejection: [object DOMError] that might be causing this issue, I have done a research and found out that it can be caused by auto-playing video on the page ( the page does have a video, but the video plays even if this error is thrown ), so I believe there should be another reason why this error is thrown

Any advice on why we see such behavior on Safari is highly appreciated.

Answer 1

Your website is rife with problems, and as some other commentators have noted, some of the problems are due to the absurdly large size of the home page causing some of the site assets to not be loaded when you want them to be loaded as some large external scripts are loading prior to your css. The reason the css in question loads on the "second" try, is because the css gets cached...eventually (after loading the one of a few dozen javascripts you request PRIOR to the one of the few dozen css files you request)...and will properly deploy the css on subsequent loads (so long as you do indeed allow enough time and bandwidth to load the page the first time).

I want to give you alot of advice off the bat, but in keeping relevant to your post:

1. Make sure your css is called BEFORE any of your javascripts in the head of your page(s).
2. Consider eliminating about 90% of the scripts that are unnecessary for your site to be useful...because very few people will have the patience to load this much data before browsing your website...especially on relatively slow mobile browsers.
3. Look at all the errors in the console of Chrome (right click on your page in Google Chrome and hit "inspect", then look at the "console" tab...your site has many errors. You must fix these if you want your site to standards compliant and more likely to be crawled by search engines.
4. Take a look at your site on Google's Insight Page: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

Good luck!