16

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

sheriff.org after refresh

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

sheriff.org in safari first time in private mode

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.

Anas Nakawa
  • 1,977
  • 1
  • 23
  • 42
  • Hello there. I can reproduce on my phone, but not on an emulated iPhone safari on Mac OS Sierra 10.12 - it might be an iOS 11 thing, however.. a lot of things are going on here, I am getting 6 js errors - which is not good at all :/ – scooterlord Dec 06 '17 at 13:54
  • js errors should not affect, they will appear in both cases, when the issue is reproduced and when its not as well. – Anas Nakawa Dec 06 '17 at 14:24
  • The error, is most probably js related though, so maybe you should also look into it. It could be caused by some kind of a timeout or triggering a DOM element not loaded yet - while at the second time, the file is cached so it loads. – scooterlord Dec 06 '17 at 14:27
  • 3
    Running Safari 11 on my Mac and the page doesn't load properly on first load *regardless of screen width*. I agree with @scooterlord that you need to fix your JS errors – TheNextman Dec 06 '17 at 16:22
  • I agree with you guys, it could be the reason, please check the update I have posted above. – Anas Nakawa Dec 07 '17 at 16:10
  • 4
    I've had the website open for 2 minutes now, and it's transferred 62.5 MB of assets to my browser. About 30MB of that was within the first 30 seconds. Related or not, that's a bigger issue for your mobile users. – hellojason Dec 11 '17 at 03:02
  • I agree with hellojason, there's a much bigger problem here (all browsers) than trying to make this render properly in Safari. Huge amounts of data being transferred, you'd think the entire site is being cached, yet I click on one of the main navigation links and would expect it to load instantly, but no, the browser refreshed and was forced to sit and wait while yet even more huge amounts of data was downloaded. Load times are up like 10-15-20 seconds to first paint. Personally, for my own company site, 5 second load time was horrible, I've gotten it down to 1 second. – Kalnode Jan 11 '18 at 23:49

1 Answers1

2

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!

Doomd
  • 1,271
  • 1
  • 16
  • 27
  • 1
    For more information on why and whether to place css links ahead of script links, there are quite a few excellent answers here: https://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid – Doomd Mar 03 '18 at 08:11