Visibility for PWA/Standalone mode

Hi @cbd4coins

Hope you are doing fine.

According to the Mozilla Developer site, the “display-mode: standalone” should be detected on Safari.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode

The support starts at version 13 on Safari. Could you helps us check the current version?

Looking forward to hearing from you.

Kind regards

Luis

Yes, Im on the most recent version of iOS and Safari.

I used the code below and it hides the popup, but the page does not work because there is something invisible blocking the page.

I also tried z-index: -1 instead of display: none, but negative z-index seems to not work on Safari

@media all and (display-mode: standalone) { 
    .hustle-layout { display: none; } } 
    
@media all and (display-mode: standalone) {
    .hustle-popup-mask { display: none; } }

Hi @cbd4coins,

I hope you are doing well today!

You can try the following jQuery for to achieve this.

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if (window.navigator.standalone) {
            $('.hustle-layout').hide();
        }
    });
</script>

Remember to replace ‘.hustle-layout’ with the exact class of the popup you want to hide.

The?jQuery(document).ready(function($) {...});?will ensure the jQuery runs after the page has fully loaded, and?$('.hustle-layout').hide();?is the jQuery way to hide an element with the class ‘hustle-layout’. The?window.navigator.standalone?is checking if it is running in standalone mode.

Kind regards,
Zafer

Thank you for the quick response! Unfortunately that didnt work for me with this code:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if (window.navigator.standalone) {
            $('.hustle-popup-id-1').hide();
        }
    });
</script>

With the EXACT code you put above with .hustle-layout, it did almost work, but the overlay was still appearing and blocking the page

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if (window.navigator.standalone) {
            $('.hustle_module_id_1').hide();
        }
    });
</script>

THIS WORKED FOR ME!! THANK YOU!!

• This reply was modified 1 year, 7 months ago by cbd4coins.