fullscreen not available on mobile in iframes

  • I do not own an apple device, so I only noticed this problem at a recent convention, when I had someone load a page that contains an iframe embed of one of my virtual tours, using an ipad. This problem is not present on Chrome on Android, but it is present in the DuckDuckGo browser on Android (which I'm currently using for testing).

    I recently solved a similar problem that WAS present on Chrome on Android... there was an update to chromium that blocked mobile sensor access, resulting in the removal of the VR and gyro buttons from my embedded vtours (embedded using iframes). The solution that I found was two parts:
    1. all data had to originate from secure locations (https)
    2. I had to add updated tags to my iframe
    I thought this had solved the problem (because it was fixed on Android), but now I know that the ability to toggle fullscreen is still missing from some mobile browsers.

    Here is my iframe after solving that chromium update problem:

    Code
    <iframe src="https://www.tinynestproject.com/explore/zyl-vardos/damselfly/" width="100%" height="320" allow="fullscreen; gyroscope; accelerometer; magnetometer; vr; xr"></iframe>


    And here is my iframe after much effort to brute-force the allowing of fullscreen:

    Code
    <iframe src="https://www.tinynestproject.com/explore/zyl-vardos/damselfly/" width="100%" height="320" allow="fullscreen; gyroscope; accelerometer; magnetometer; vr; xr" allowfullscreen webkitallowfullscreen mozallowfullscreen allowvr="true" allowfullscreen="true"></iframe>


    none of the following would enable the fullscreen button in DuckDuckGo:
    allow="fullscreen"
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen="true"
    allowfullscreen="yes"

    Banging my head against a wall here... what is preventing fullscreen from working? VR and gyro seem to work, which require access to the device's sensors...
    Here is my testing page -> https://www.tinynestproject.com/explore/demo/

  • Hi,

    The iPhone doesn't support the HTML5 fullscreen mode at all.

    The iPad does it since iOS 12, but only in a very broken state - as soon as you swipe down anywhere the fullscreen mode closes - and that makes normal touch control basically impossible. Therefore the HTML5 fullscreen mode support is 'blacklisted' for the iPad in krpano.

    About the DuckDuckGo browser on Android - the strange user-agent of that browser lets krpano think this is a very old Webkit-based Android browser. And that browser was claiming to support the HTML5 fullscreen, but in real it didn't, therefore it was blacklisted there too (in the next krpano release that detection will be removed, because not necessary today anymore).

    To force enabling HTML5 fullscreen support (regardless if the browser it really might support) add this code anywhere in the xml:

    Code
    <set var="device.fullscreensupport" val="true"  />

    Best regards,
    Klaus

  • Zitat

    The iPhone doesn't support the HTML5 fullscreen mode at all.

    How can Apple be this bad... I have no words to express my feelings of frustration towards things like this... it's completely nonsensical...
    Is there official Apple documentation that describes this lack of support?

    Is everything that runs inside iOS affected? or is it per-browser? (e.g. does Chrome for iOS support it?)

    Thanks for the code to force support... if I were to add this (to tour.xml?) what would happen on an iPhone? would there be a fullscreen button that simply does nothing?

  • Hi,

    Zitat

    How can Apple be this bad... I have no words to express my feelings of frustration towards things like this... it's completely nonsensical...
    Is there official Apple documentation that describes this lack of support?

    I don't know, but generally there is almost zero and only very outdated official documentation about Safari from Apple available...

    Zitat

    Is everything that runs inside iOS affected? or is it per-browser? (e.g. does Chrome for iOS support it?)

    Yes, it affects all iOS browsers.
    Theoretically other iOS browsers should be able to 'inject' their own implementation for a HTML5 fullscreen mode support, but unfortunately no one does...

    Zitat

    Thanks for the code to force support... if I were to add this (to tour.xml?) what would happen on an iPhone? would there be a fullscreen button that simply does nothing?

    Right, then nothing will happen.

    Best regards,
    Klaus

  • Thank you for the info, I really appreciate it.
    I guess I will have to include a separate "fullscreen" link outside of my iframe that simply loads the dedicated tour page... maybe I can write it such that it only shows on iOS, as to not clutter the rest of the sane world :P

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!