New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Safari issues: broken font/image rendering on woocommerce pages with slider

Viewing 12 posts - 1 through 12 (of 12 total)
  • Back to forum
    Posted in: Neighborhood
  • August 3, 2015 at 7:49 pm #200339
    airuck
    Member
    Post count: 36

    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.
    August 4, 2015 at 6:11 pm #200761
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

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

    – David.

    August 4, 2015 at 7:50 pm #200775
    airuck
    Member
    Post count: 36
    This reply has been marked as private.
    August 4, 2015 at 8:05 pm #200776
    airuck
    Member
    Post count: 36
    This reply has been marked as private.
    August 4, 2015 at 8:12 pm #200777
    airuck
    Member
    Post count: 36

    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

    August 5, 2015 at 9:54 am #200854
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Aaron,

    Glad it’s sorted, very odd issues indeed.

    Best,
    David.

    September 5, 2015 at 1:22 am #210550
    jason_sahn
    Member
    Post count: 6

    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

    September 5, 2015 at 5:15 am #210562
    airuck
    Member
    Post count: 36

    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.

    September 5, 2015 at 9:56 pm #210613
    jason_sahn
    Member
    Post count: 6

    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

    September 7, 2015 at 4:12 pm #210993
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    September 7, 2015 at 5:09 pm #211017
    airuck
    Member
    Post count: 36

    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).

    September 9, 2015 at 10:31 am #211607
    David Martin – Support
    Moderator
    Post count: 20834

    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.

  • Back to forum
    Posted in: Neighborhood
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.