Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Mobile version rotation

27 Feb 2017, 03:25

Hi Karl,
Wanted to ask if this is how it is supposed to work.
I hope you don't hate me by now, not doing this with bad feelings :innocent:

Picture 1
initial page load- everything looks fine

Picture 2
Rotation of screen- slideshow is cut and not fitted.

Picture 3
Front page is fitted with bottom content, not slideshow only

Picture 4
How horizontal page looks like reloaded (looks fine).

So my question is, isn't everything supposed to look like 1 and 4 ? Maybe yes, but technically very hard or even impossible?
Attachments
4.jpg
4
4.jpg (157.76 KiB) Viewed 3430 times
3.jpg
3
3.jpg (120.96 KiB) Viewed 3430 times
2.jpg
2
2.jpg (127.77 KiB) Viewed 3430 times
1.jpg
1
1.jpg (129.7 KiB) Viewed 3430 times
Last edited by GeoPal on 27 Feb 2017, 03:33, edited 1 time in total.
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: Mobile version rotation

27 Feb 2017, 03:31

One more similar question.

Picture 7
Initial page load- all is fine

Picture 8
Page scrolled down

Picture 9
Go to top button clicked- browser address bar hidden, part of the white page visible and slideshow not filling the whole page? Was it always like that? I think once upon a time hitting the go to top button went to fullscreen fitted slideshow again? Just qurious if there was any change?
Thanks, G
Attachments
7.jpg
7
7.jpg (96.09 KiB) Viewed 3429 times
6.jpg
6
6.jpg (93.94 KiB) Viewed 3429 times
5.jpg
5
5.jpg (96.09 KiB) Viewed 3429 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version rotation

27 Feb 2017, 05:42

I must admit, I only SKIMMED through your entire message, because I know EXACTLY what you are asking. My question to you though, did you try this slideshow on mobile BEFORE the last update?

If you did, you would have noticed the following (on mobile devices):
  • On page load, the slideshow would correctly take 100% available height.
  • When scrolling down, the browser URL bar would automatically disappear, technically resizing the browser area, and causing TWO major flaws with the slideshow: A) Since the slideshow height increases, and you have set to COVER mode, this means the image inside will suddenly increase in size on scroll, to match the new height. B) If you are scrolled to bottom of page, start scrolling upwards, the browser URL bar will re-appear, effectively changing the height of your slideshow at the top ... This of course makes all content below the slideshow JUMP.
  • Repeat this issue every time the scroll is toggled up/down when the browser URL field displays and hides.
BOTH the A/B effects noted above create awful glitches to a page with slideshow set to 100% height. THEREFORE, we chose to LOCK the slideshow height on load. The height the slideshow displays at will depend on a few factors: If the browser URL field is displaying on page load, and if the browser url field is displaying on device-rotation. But YES, when scrolling around and/or rotating the device, you may end up with a slideshow that may cover slightly more or slightly less than the visible area ... This is because we need to set a fixed height to prevent the height of slideshow from scaling up/down WHILE scrolling ... Thus, to prevent some awful UI and layout-thrashing, the height of slideshow is locked on load, and will not always be identical to height of browser visible area.

Hope that was understood without me having to create a video.

If you have any examples of other non-X3 websites with 100% slideshow/intro image, I can show you that they either have this bug where slideshow resizes on scroll, or they have implemented a similar fix.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version rotation

27 Feb 2017, 05:58

Most of your screenshots are correct, also #9 ... Depending on how the browsers/OS nav/UI is taking space- or not taking space, the slideshow does not dynamically expand/collapse in height on mobile devices while on the same page, thus it may not at all times be exactly 100% of browsers available area. If it expands dynamically (on scroll for example), it causes layout thrashing because the slideshow ill cause below content to shift in position, and the image inside will scale up/down.

I am a bit unsure what I am seeing in #2 and #3 though. What browser is this? Something very old on Android that doesn't support orientationchange event? I just tried it from my iPhone here, and it doesn't look like that on rotation ... After rotating device:
Image
Image
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: Mobile version rotation

27 Feb 2017, 07:13

Android 7, Chrome /I suppose latest available/.
I think I understand what you said about the slideshow and more or less that is how it is suppose to work.
About your screens- yes, this is what I expect and what I want to see after I rotate my phone, but I actually get picture #2, whish is cut and not fitted until I hit reload ( picture #4)

Best, G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version rotation

28 Feb 2017, 01:18

GeoPal wrote:Android 7, Chrome /I suppose latest available/.
I think I understand what you said about the slideshow and more or less that is how it is suppose to work.
About your screens- yes, this is what I expect and what I want to see after I rotate my phone, but I actually get picture #2, whish is cut and not fitted until I hit reload ( picture #4)
I am away from home this week, and will need to check this from my Android device next weekend. I could have sworn I already checked this new behavior from my Android, but I will have to re-check. On rotate, there is a new event that uses window.on('orientationchange'), which should be supported by pretty much all mobile devices. Not sure if it's not working from your device for some reason, or perhaps there screen properties do not update immediately after the event triggers.

I checked from both Safari and Chrome on iOS, and it works as it should (see screenshots from my last post).
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version rotation

04 Mar 2017, 11:52

I can confirm the slideshow height does not update properly on Android device rotation. Although not a critical issue, I will look into this for an update X3 0.22.3.

If you want to see the annoying glitch in slideshow percent heights in previous X3 versions, you can check this website (currently X3 0.21): alanmacleod.co.uk. I just checked it from ALL mobile browsers on both iOS and Android, and the issue is consistent:

1. When scrolling down, once the browser URL field disappears, slideshow height will shift, and the image will actually scale inside the slideshow area.
2. Scroll a bit further down. The scroll up/down, making the browser URL field show/hide. You will notice the content of the page jumps up and down, since the slideshow height at top of page is shifting, pushing content below up/down.

We cannot allow the slideshow to shift height while scrolling up/down on mobile devices.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version rotation

05 Mar 2017, 11:04

This Android rotation issue was fixed in X3 0.22.3, and applied to all intro-modules: Video, Slideshow and Image.

The problem is that Android triggers orientationchange event before the device rotation completes, and therefore X3 gets incorrect data about screen height from the event. It is discussed in this post on stackoverflow. We solved it by adding 300ms delay for non-iOS devices (normally Android). 
Code
x3_win.on('orientationchange', $.debounce(300, (x3_tests.ios ? true : false), set_size));
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: Mobile version rotation

07 Mar 2017, 02:53

Thank you, Karl!