Rotation problem with lightbox galleries

I have noticed this for months and never reported it and figured someone else would have by now… but I wasn’t able to find any topics on it.

Any gallery I’ve done with webflow has problems on at least an iPhone X when I rotate my phone and then rotate it back. The images don’t reset back into place. Is webflow aware of such issues?

Live site: https://www.ladylucktrio.com/lady-luck-trio-photos


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hi @bodwa, thanks for the report. Yes, there is some behavior with the lightbox that causes the positioning of the lightbox image to be altered when rotating the mobile device.

Our team is looking in to the issue and as soon as I have more info, I will respond back with an update.

Thanks in advance.

2 Likes

Hi I’m new to Webflow after moving from many happy years with Muse, I’m not a web developer just needing to run a couple of my own sites. I have managed to work through most of what I need to do with the help of the tutorials and the community, however my final part is to create photo gallery’s to show client images. Having spent many frustrating hours now trying everything possible I find that the problem I have been having is actually a known problem as shown on the original post! Frustrated is not quite adequate as the site was ready to go live until the gallery problems.

Is there any news when this problem is going to be rectified?

Hi @Allang1

No updates on this one at this time. We’ll definitely post back when we do have more information for you, though.

Thanks for your patience while we continue to look into this.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

This seems to not only be a problem with lightbox, it is happening with the slider element as well - when I rotate the mobile device back and forth between landscape and portrait mode on a mobile device (iPhone for me) the sizing and positioning is way off (i.e. stays in the formatting that it was loaded in originally and the entire page has to be reloaded in the orientation you want to see your content in order to “fix” the issue.

Have there been any updates for this?

Love working with Webflow but this is a bit of a hiccup and seems to be an ongoing issue. Please, please, please, please, please, please . . . please fix this.

Thanks!

This seems to not only be a problem with lightbox, it is happening with the slider element as well - when I rotate the mobile device back and forth between landscape and portrait mode on a mobile device (iPhone XR for me) the sizing and positioning is way off (i.e. stays in the formatting that it was loaded in originally) and the entire page has to be reloaded in the orientation you want to see your content in order to “fix” the issue.

Have there been any developments on these issues? Any update on an ETA possibly?

As a temporary fix, is there a way to automatically have the page reload when the mobile devices switch between orientations? Just a thought.

Thanks so much!

Hi, @epicurious_fox!

Yeah, I completely understand your frustration. :bowing_man:

I was able to locate a workaround: html - How to reload the webpage when orientation changes? - Stack Overflow

window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0:
                case 90:
                case -90: window.location.reload(); 
                break; } 
    };

Adding the script to the project should allow it to refresh upon rotating your device.

I was able to test the code at https://lady-luck-orientation.webflow.io/lady-luck-trio-photos, and it seemed to work as expected. :pray:

1 Like

I will give this a try! Quick question: did you add this in the dashboard under custom code or do you have to do it another way?

Great question!

I had added it to the dashboard within Custom Code as a test, though adding the script to particular pages that contain lightboxes would work well :+1:

1 Like

Ok,maybe I’m just being dense here . . . I copied and pasted the code from this post and the original post and used the embed element on the page and I’m not sure that I’m embedding it right - do I need any special tags or semi colons/brackets/any other fun punctuation here? LoL

Share link: https://preview.webflow.com/preview/strickler-2019?utm_source=strickler-2019&preview=507c483d2ca2033787673d4d68a5bd25

Hey @mistercreate! thanks for keeping the conversation going here! I added this in my project settings header:

<script type="text/javascript">

window.onorientationchange = function() { 

    var orientation = window.orientation; 

        switch(orientation) { 

            case 0:

            case 90:

            case -90: window.location.reload(); 

            break; } 

};
  </script>

I added the close script tag because that was messing with my site. However, when placing this, and trying the Lightbox… the result I’m getting is that the Lightbox is closing and not reloading… so I have to tap the image I’m looking at again to get it to work. I don’t sense that this was the result you achieved? It looks like maybe we’re missing something else in the coding?

Thanks again for looking into this for us :slight_smile:

1 Like

Yes, this isn’t the most graceful workaround as it automatically refreshes the page upon mobile device rotation which results in the Lightbox element seeming as if it is closed. Though, the page is completely refreshing upon rotation.

@epicurious_fox - feel free to place the script between the opening and closing script tags

This worked for me like it did for @Bodwa - Not the most graceful work around BBUUUUTTTT, it is WAAAAAAYY better than what was happening before; that said, we [and by we I mean the good people (and by people I mean developers) at Webflow are working to fix it … right?] LoL

@mistercreate and @Bodwa - can’t thank you enough here!

Yup yup, you got it :bowing_man: - this is just a temporary workaround while the engineers are working on the permanent fix, though I don’t yet have a timeline on when it will be available.

1 Like

Is there any update on this issue? :slight_smile:

1 Like

@FakerAgency @Bodwa @mistercreate I have not heard anything since this work-around was given. Saw there was a little activity on this post and was Hoooooooooping that it was the developers at webflow … FIVE … MONTHS … LATER (said in a Sponge Bob Time Lapse style) - any new developments in relation to this issue?

1 Like

I am currently experiencing a format glitch when switching between a lightbox on mobile portrait and landscape. Any thoughts as to why this may be happening?

Thank you!

I am also having a problem when rotating the device.

Seems your almost working longer than a year on the fix for really a big problem in your designer.

and to be honest after a year you should know a timeline for when this bug is fixed?