Not loading main image on mobile

[mpeterson]

We have a weird issue where when we look at our product page on mobile, specifically iphone, it is not loading the main image. It works when we press the zoom button and then zoom out.
Here is our product page: [link-removed]

 

[WebSupport]

If you scroll fast enough on page load to where the 360 product view is on mobile, you will see that it's loading fine, shows the first (pre-loader) image, the hotspots and sometimes even starts spinning until all of a sudden, the images disappear..

It's pretty clear I think that one of the third-party / theme plugins on this page indiscreetly changes image visibility across all images that is indicated by blinking of the main product image at the top and some further blinking of the other images on the page as well, and that's the moment I think when it happens on mobile, i.e when webrotate images go blank.

Do you have an idea as two what plugin can be doing it (that image blinking on mobile)? A quick test would be to disable iconic woothumbs to see if it's still reproducible or placing the webrotate shortcode one some test page without woocommerce / woothums.

PS: there might be a quick workaround making this style display:block !important in your CSS overrides, but it's not immediately clear if it can cause side-effects:

.wr360_player .container .panning {
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    display: none;
}

 

[mpeterson]

Whats weird is that is it was working on another product page, and it looks like it's working on our development site just fine. That code didn't seem to fix it, but yes if we scroll really fast it seems to work. On our development site, we have woothumbs and the 360s are loading without problem

 

[WebSupport]

It looks like you haven't replaced display: none; with display:block !important in your CSS overrides.

Please make the update and I think it will work. PS: we just debugged our test iPhone through desktop Safari and can see that something on this page is removing our inline display style from the 360 product images (i.e referenced by the .panning class)

 

[mpeterson]

Ah, I mis-read your comment as pasted that code exactly instead of changing it to display:block. That appears to have fixed it