Safari issues: broken font/image rendering on woocommerce pages with slider

[airuck]

We’ve run into an issue where the newest neighborhood theme doesn’t always load in IOS safari (iphone and ipad). The issue seems to be related to three things:

1. google font loader
2. revolution slider
3. elements with custom fonts

When these three things are present on a page, it has potential to not render these elements properly, it seems.
The issue is definitely not server-related, as I’ve produced a remote simplified test case that demonstrates the problem. You can find it at: http://output.jsbin.com/zakeru
If this page is loaded in an iphone or ipad repeatedly (especially if you interrupt a page load and then reload), you will see the issue. I’ve attached screenshots to show the problem.

The issue is tricky, it won’t manifest on every page load. Sometimes you have to stop loading a page and then load, but I find that always within 10-15 page loads the contents will break, and often several times in a row, on both my iphone and ipad. Other employees have confirmed this, and several customers have reported the issue.

This issue began some time in the neighborhood 3.0 release cycle, unsure when.

Note that if I disable jquery, remove the google font loader code from the header, or remove the revolution slider, the issue seems to go away. Also, the product images also disappear when the font breaks.

EDIT: Note that in the test case images, the one with the sidebar menu and product images displaying is “correct”: the styling only looks bad because I removed as many unrelated elements from the page to help troubleshoot the issue.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Can you add a private login so I can take a further look at your setup?

– David.

[airuck]

This reply has been marked as private.

[airuck]

This reply has been marked as private.

[airuck]

David, I think this is all set now. I see the same flash of blank content as before, but when the slider loads now, the content displays correctly. Will mark as resolved unless it resurfaces…thanks for your time!
-aaron

[David Martin – Support]

Hi Aaron,

Glad it’s sorted, very odd issues indeed.

Best,
David.

[jason_sahn]

Can someone please shed some light on what was causing the issue? I’m actually the experiencing the exact same problem. Images not rendering sometimes in Safari.

Thanks,
Jason

[airuck]

Jason,

I still see this very occasionally. I believe it’s related to the revolution slider and the google font loader and some quirk in webkit. It seems most prominent if a page load is interrupted (e.g., during rapid testing) or immediately reloaded. We solved it (or mitigated it) with caching for better performance, but I haven’t totally solved it; I just reproduced it now. Wish I had better news for you.

[jason_sahn]

Aaron,

Thanks for your reply and feedback. That makes the theme a little unreliable if it doesn’t load consistently on Apple devices. :/ Going to try switching it back to Arial font on our test site to see if it improves.

Hope they find a way to fix this soon (whatever it is),
Jason

[David Martin – Support]

Hi @airuck,

Interestingly, google fonts are loaded twice on your page. Once by the theme and then again by Rev’ Slider. Have you tested this without the Rev’ Slider including the fonts ?

-David.

[airuck]

Hi David,

Thanks, nice spot! Looks like an old setting on the individual slider that was including the fonts. I think I’ve fixed the include twice issue, but I can still reproduce the iOS “empty divs until you scroll up” issue after a few page loads, though, at about the same frequency as before (maybe every 5 page reloads).

[David Martin – Support]

Hi,

I am testing this on my iPhone currently and am struggling to replicate any issue.

Can you list the steps to replicate this?

– Are you using any caching plugins?

Thanks,
David.