Error on Chrome Ipad/iPhone

  • There is a problem on iPad and iPhone with Chrome if you are linking to a tour by opening in NEW WINDOW: Se the image. I do not know if it is a new problem with last update of Chrome or how long it has existed. I discovered it by opening my tours from my Client`s website. where my tours are linked. https://dnm.dk/virtuelle-udstillinger/ I have checked it by setting up the links on my own website with same links both opening in new window and same window. Safari and Firefox has no problem. The only way to correct the page is by turning iPad to portrait and back to landscape. This makes the bottom jump up in place. Is ther a way to correct this without need of asking the client to change the opening to same window.

  • This is ridiculous.There has been 112 visits on my post and not one has responded.

    There must be hundreds of Virtual Tours which has this problem. I just doen a fast look into my bookmarks and in 5 min I found 3. You may not discover the problem until you turn the iPad to portrait an you see that there was actually a controlbar at the bottom you did not see
    https://www.presidentti.fi/en/presidentialpalace360/ Check the 2 screenshots. The controlbar is not visible at bottom until you have turned the iPad to portrait and back again.

    https://vaneyck2020.be

    https://www.louvre.fr/en/online-tours

  • Hi,

    actually this is an iOS Chrome bug and not krpano related.

    The krpano viewer is simply a html element with the style height:100% and the iOS Chrome browser is doing the misbehavior here.

    The only case where the krpano viewer is doing some kind of browser layout hacks is the iPhone fullscreen mode - and this only for iOS browsers which support that somehow. iOS Chrome is here one browser (maybe the only one) that doesn't support that because of its strange behavior, additionally it doesn't even support the iOS safearea feature, which makes a fullscreen mode on iOS Chrome even more impossible. That means for fullscreen/fullpage layouts the iOS Chrome browsers is unfortunately the worst one. Luckily that browser is relatively rare used on iOS.

    Here more information about that problem:
    https://stackoverflow.com/questions/6609…message-messeng
    https://stackoverflow.com/questions/3711…-mobile-browser
    https://bugs.webkit.org/show_bug.cgi?id=141832

    CSS/JS workarounds might be possible but I haven't checked or tested that yet in detail.
    Anyway I will have a look of course but maybe some special detection plus automatic fixes/hacks can be added...

    Best regards,
    Klaus

  • Thanks Klaus. I also came to the conclusin that it is a Chrome problen which I guess is from a new update this year. I have actually charged my old iPad from 2013 which have not been updated for at least 5 years. Everything works perfect, No problem with opening in New window. I will ask my Client to change their links if they want full support. Or maybe better ad a text above the Thumbs and ask the visitors not to use chrome or describe how to easy get it fixed by turning the iPad.

  • I suggest as many as possible report this bug to Google. If you have a client who link to your tours by opening it in a New Window use that for the report. Or use one of these museum sites that do it.


    https://dnm.dk/virtuelle-udstillinger/

    https://www.presidentti.fi/en/presidentialpalace360/

    https://vaneyck2020.be

    https://www.louvre.fr/en/online-tours

    https://tenboom.org

    https://www.smb.museum/museen-einrich…de-museum/home/

    https://www.hgm.at/museum/entdecken/virtuelle-360deg-tour

    Actually also Googles own tours suffer from the problem like this from the https://www.britishmuseum.org If you do not know that you can scroll down using the little menu line at the top you will not be able to see the thumbnails. Turn 90 degrees and you can see that the problem is solved just like all other tours.


    I also just discovered that it can also be corrected by clicking in the adresse-line or if you use the share button and open the keyboard it will correct it selv the same way as if you turn the ipad.
    Even writing the report make the page shrink and adapt. However the screenshot shows the error.

  • CSS/JS workarounds might be possible but I haven't checked or tested that yet in detail.
    Anyway I will have a look of course but maybe some special detection plus automatic fixes/hacks can be added...

    Best regards,
    Klaus

    Hi Klaus I have found this site https://hullfilm.com/ The tours open in NEW page. It is actually the former regal360 creator. All the tours except the Corie Teen Boom Museum https://virtualtour.corrietenboom.com/ open correct on Chrome. I can see That all the newer ones are made the same way as far as I can see by a KOLOR template. But there are so many scripts used that I have no idea what corrects the height on Chrome. The Teen Boom Museum does not seem to be based on a Krpano script and it opens missing the full bottom buttons.

    Could it be some of these CSS styles that does the correction.


    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <style type="text/css">
    @-ms-viewport { width: device-width; }
    @media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
    * { padding: 0; margin: 0; }
    html { height: 100%; }
    body { height: 100%; overflow:hidden; }
    div#container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
    div#tourDIV {
    height:100%;
    position:relative;
    overflow:hidden;
    }
    div#panoDIV {
    height:100%;
    position:relative;
    overflow:hidden;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    }
    </style>


    The TenBoom tour only has thes styles <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <style> @-ms-viewport { width: device-width; } </style>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!