fullscreen button not working on IOS Iphone

[slow-data]

Hi,

thanks for these amazing extras! I tested the fullscreen button while building a leaflet in R using

myLeaflet %>% addFullscreenControl()

I am embedding the map in my site using iframe

<iframe style="border: 0;" src="http://slow-data.com/webmap/openmap.html" width="3000" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

the page with iframe is this one http://slow-data.com/wifibar/ on desktop the fullscreen button works great and on Android too, but on my Iphone 5 it doesn't. Any idea what is going on?

Thanks, Jacopo

[bhaskarvk]

Try with the pseudo full screen mode. addFullscreenControl(pseudoFullscreen = TRUE)

If you want a test page see http://rpubs.com/bhaskarvk/fullscreen second example. If pseudo full screen mode works for you, please add a comment for future reference and close the issue.

[slow-data]

I tested and it doesn't work. In addition with this option also full screen on desktop does not work.

[bhaskarvk]

Another point allowfullscreen="allowfullscreen"

should be just allowfullscreen, so something like <iframe ... allowfullscreen>

[slow-data]

Yes, but my CMS (wordpress) changes automatically to allowfullscreen="allowfullscreen". I don't know why. Do you think this could be the problem?

[bhaskarvk]

I don't know. Does the second example from my link above work in iphone 5.x ?

[bhaskarvk]

Nothing more to do from leaflet.extra's side. Something to be investigated on iphone browser side.

[zhen1991]

Hi guys! I am facing the same problem,so i am wondering if you guys found a solution to this?? thnx for helping ! by the way my map is only not working on safari in iphone but it work on safari in mac!

[sbalmer]

@zhen1991 in my case the CSS rules for .leaflet-pseudo-fullscreen were missing:

.leaflet-pseudo-fullscreen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 99999;
}