Mobile displays incorrectly if opened in landscape

[uudruid74]

If I open the gallery in landscape mode, the pictures are the wrong size (as if its in portrait) and it shows part of the next picture to the side. If I open in portrait and then rotate to landscape after its open, it works correctly. If I open in landscape, let it display incorrectly, then rotate to portrait, it displays correctly in portrait and rotating back to landscape displays correctly.

This is on mobile firefox. I am unable to make it work on Chrome at all ... see my next issue

[dimsemenov]

• What exactly device?
• Can you repeat the issue on the main demo page?

[uudruid74]

Its on a Oneplus One phone, 1080x1920 screen, but I think the issue is in the configuration and layout of the site. I don't have complete control over everything as I'm kinda show-horning things into a joomla site so its displaying as joomla article. To see the effect, open https://eddon.systems/joomla/index.php/web-site/photo-gallery in firefox while the phone is in landscape. When you bring it full-screen, it will be displayed wrong. If you open PhotoSwipe in landscape and rotate it after its open, it works correctly. You can also "fix" it no matter how its opened by rotating the phone and then rotating it back.

This is in Firefox as I have Chrome's full-screen disabled due to other problems. I've not had a chance to test other browsers

[uudruid74]

Still not able to repeat this on the demo site, but I can at least give some more details on the behavior I'm seeing. When the photogallery is first loaded, there in a URL bar at top. When photoswipe opens, it pushes this bar out of the way, and everything displays properly. If I slide the page up to hide the bar, or photoswipe is closed (bar is still hidden), then it displays in the same shape and size as if it was not full-screen. As long as I pull down the page to expose the url bar, or I rotate the screen and rotate it back, then it displays OK.

Using codepen on my phone is very difficult, and it seems the only way to test this. Full screen is no longer disabled in Chrome as I fixed those problems, so you can use the URL above to see the effect. Ideally, I would just find a way to open directly to full-screen mode when this page is in ladscape as its kinda useless the way it is, but I don't know if that will fix this particular issue or not.

Again, I think this is due to me not using fixed sixes unless I absolutely need to.