Google Maps embed goes black on mobile when dragging

  • Hi,

    I am using the “fancybox-iframe” class option and this works when I embed most content.
    However, when I try to embed Google Street View 360° images (from the Google Maps share option), the image appears in the light-box initially, then as soon as you try to touch and drag the image around, it goes black and freezes (on iPhone or iPad only).
    The street view arrows work.

    On Android (using Chrome) it works perfectly and shows the gyro icon and works when you move the phone.

    On desktop it also works as it should.

    Click on the images towards the bottom of this page in the ‘What it looks like’ section to see the issue: https://prototype.skyavenue.com.au/google-street-view-inside/

    Any help appreciated!

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hi, thanks for reporting this.

    Sadly, it sounds like an issue that only Google Maps can solve. You could try reporting this on https://productforums.google.com/forum/#!forum/maps …

    Thread Starter skyavenuepd

    (@skyavenuepd)

    Thanks for your reply.

    It’s most likely that I will get the response that I should contact the plugin developer.

    Are you able to take a closer look and at least advise what is going wrong?

    Thanks.

    It’s most likely that I will get the response that I should contact the plugin developer.

    What happens if you create a test page with a simple iframe (so no fancybox) to embed a Streetview 360? Does that go black too on iDevices?

    Thread Starter skyavenuepd

    (@skyavenuepd)

    Hi,

    It works perfectly on iPhone on the same website at: https://prototype.skyavenue.com.au/test-page

    Hmmm, that’s interesting. Mainly because the light box is essentially just an iframe embed that is displayed as a floating element… I’ll have to find a iDevice to test with further to find out what is going wrong.

    Thread Starter skyavenuepd

    (@skyavenuepd)

    Thanks so much for that, I’d really appreciate it!
    I’ve been looking for a long time to find a solution to show this sort of imagery in a lightbox.
    The plugin is excellent apart from this one issue ??

    I’ve set up a test page here https://dev.status301.net/easy-fancybox-sandbox/streetview/ where the TEST link opens the same URL in a FancyBox iframe as the iframe below that.

    Could you compare the two on your iPad?

    Thread Starter skyavenuepd

    (@skyavenuepd)

    On iPad, the link opens up the easy-fancybox window and works perfectly – no black screen! (The gyro function does not work, but that’s ok) Tried Safari and Chrome iOS.

    On iPhone, the link does not do anything? No easy-fancybox window opens at all?

    On desktop, no issues.

    Thread Starter skyavenuepd

    (@skyavenuepd)

    Update: link now works in iPhone on your test site and black screen issue is gone!

    OK, the version used there has a very small patch related to centering of the frame but I would not know how that could affect the iframe content.

    Still, you could try that version on your site: go to https://github.com/RavanH/easy-fancybox and download that version ZIP file (green button in the right), then unzip the files and upload them by FTP overwriting the current plugin files. Then test on your site and please let me know ??

    Thread Starter skyavenuepd

    (@skyavenuepd)

    Thanks for that!

    I have replaced the files with the ones from github and noticed something more specific (maybe this was happening before).

    On iPhone on my website, when I tap on the pop-up Street View image (in the fancybox), the fancybox disappears upwards and I am automatically taken to the bottom of the page.

    The black screen I was reporting earlier seems to be the transparent background of the fancybox, and the fancybox is still there when you scroll up to it.

    Once you scroll back up to the position of the fancybox on the page, it works normally.

    So in summary, it appears as though when touching the street view image inside the fancybox in the first instance, it moves the screen view to the bottom of the page (hence the black screen) which is part of the semi-transparent fancy-box background.

    Hmmm… this weird scrolling behavior is that happening on https://dev.status301.net/easy-fancybox-sandbox/streetview/ too?

    Thread Starter skyavenuepd

    (@skyavenuepd)

    It wasn’t happening on your test site yesterday. Just now there is an error though when you click the link, which says “The Google maps embed API must be used in an iFrame”.
    (which I was getting for a while and it went away after replacing the link code again).

    I noticed that when I open up the fancybox on iPhone I can tap the ‘Rotoate’ and ‘Zoom’ buttons on Google Maps and the wierd scrolling doesn’t happen – it only does when tapping on the image itself.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Google Maps embed goes black on mobile when dragging’ is closed to new replies.