ios full screen issue

rawevolution's Avatar

rawevolution

30 Aug, 2017 11:18 AM

Hi Dmitry,
Just like to say I've been really impressed with your plugin so far. I've encountered one strange issue though.
If you go to this page: https://tripmasher.com/location/6492/Malaysia and make one of the galleries go full screen on an ios device it doesn't place itself above all other elements on the page and take up the full width and height of the window and the fullscreen toggle button is not visible.
This works fine in firefox, safari and chrome on Android and PCs but all ios devices regardless of whether they are using safari or chrome seem to suffer from this issue. Any advice is greatly appreciated.
Cheers

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Aug, 2017 03:09 PM

    Dmitry Semenov's Avatar

    Hello,

    I'd recommend to create a reduced test case, all slider does when entering fullscreen is sets position:fixed on itself and stretches to 100% width and height of window. I tried fiddling with remote debugger and it seems if you remove overflow: auto style from #searchDestination and #searchContainer it starts working, your max-height style that you force is likely causing this CSS bug.

    Btw, you should increase z-index of caption, e.g. .rsGCaption { z-index: 100; }, as it currently jumps during the transition.

  2. 2 Posted by rawevolution on 31 Aug, 2017 01:36 AM

    rawevolution's Avatar

    Thanks for such a prompt reply and for your advice. After playing around with your suggestions for a while I realised the best solution is to remove the gallery container from inline and place it at the end of the page. This overcomes any incompatibilities with users' custom styling. Happy to implement my own hack to deal with this but was wondering if you might already have a way to inject the fullscreen gallery at the end of the page?

    Cheers

  3. Support Staff 3 Posted by Dmitry Semenov on 31 Aug, 2017 04:28 AM

    Dmitry Semenov's Avatar

    You can manually move the root slider element via JS when it enters fullscreen and then place it back when it exits, events like rsEnterFullscreen and rsExitFullscreen should help.

    var slider = $(".royalSlider").data('royalSlider');
              slider.ev.on('rsEnterFullscreen', function() {
    
              });
              slider.ev.on('rsExitFullscreen', function() {
                
              });
    
  4. 4 Posted by rawevolution on 31 Aug, 2017 05:12 AM

    rawevolution's Avatar

    Thanks Dmitry, will use that.
    Cheers

  5. 5 Posted by rawevolution on 31 Aug, 2017 07:19 AM

    rawevolution's Avatar

    In case anyone else needed the solution. I ended up having to make a container for the slider because IOS also seems to handle insertAfter badly as well.

                slider.ev.on('rsEnterFullscreen', function() {
                    var currSlider = $("#"+slider.slider[0].attributes[0].value);
                    currSlider.appendTo(document.body);      
                });
                slider.ev.on('rsExitFullscreen', function() {
                    var currSliderID = slider.slider[0].attributes[0].value;
                    var currSlider = $("#"+currSliderID);
                    var sliderContainer = $("#"+currSliderID+"_container");
                    currSlider.appendTo(sliderContainer);
                });
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac