Background-Stretch calculation incorrect at Notebook Win10 Touch

[Xendiadyon]

Hi,

we (https://community.contao.org/de/showthread.php?48990-full-background-images-Full-Background-Image(s)-Slider/page4&p=431176#post431176) encountered a problem with Win10, Desktop, Chrome, Touch-Display: The device is rendered as "isMobile= true" and thus the calculations of the width-to-height-ratio are incorrect: Mobile device: always working fullscreen; screen width/height and window width/height are always comparabe. desktop device: browser does not neccessarily have to be full-screen.

I implemented a pretty crude fix. First, I changed "landscape = true" for landscape orientation (in the original code, it is counter-intuitive as landscape = false stands for landscape orientation). Then, I always chose the window.innerHeight (only when screen.Height would be 100 px larger than window.innerHeight, we use screen.height.)

This workaround gives a pretty good solution on desktop monitors, but with smartphones, it might be buggy. A better workaround would be to refine the "isMobile", because touch does not always mean that it is a mobile device. Please review this extension with a touchable desktop interface at different browser-window-sizes in comparison to screen ratio.

/htdocs/system/modules/full-background-images/assets/js/jquery.backstretch.min.js or jquery.backstretch.js on line 222-228

     var bgCSS = {left: 0, top: 0}
                    , landscape = (Math.ceil(window.innerWidth / window.innerHeight) > 1) /* 170131 CM fix: landscape = (Math.ceil(window.innerWidth / window.innerHeight) > Math.ceil(screen.width / screen.height)) */
                    , rootWidth = this.isBody ? (isMobile ? (landscape ? window.innerWidth : window.innerHeight) : this.$root.width()) : this.$root.innerWidth() /* 170131 CM fix: */
                    , bgWidth = rootWidth                   /* nimm einfach immer die window.innerHeight! Außer wenn die screen.Height nur geringfügig größer ist als die window.innerHeight, dann verwende diese */
                    , rootHeight = this.isBody ? (isMobile ? (landscape ? ((screen.height < window.innerHeight+100) ? screen.height : window.innerHeight): ((screen.height < window.innerHeight+100) ? screen.height : window.innerHeight)) : (window.innerHeight ? window.innerHeight : this.$root.height() )) : this.$root.innerHeight()
                    , bgHeight = bgWidth / this.$img.data('ratio')          /* quer */                                                                      /* hoch */
                    , bgOffset;

[bytehead]

Hi,

Thanks for reporting! I know the issue with detecting touch and mobile devices. I'm not really in to the topic of the javascript part of this extension for now. I'll try it with your changes!

Then, I always chose the window.innerHeight (only when screen.Height would be 100 px larger than window.innerHeight, we use screen.height.)

Whats the reason behind this 100px?

[Xendiadyon]

A browser in a mobile device has nearly the format of the screen. Thus the background should have nearly the format of the screen. This is valid as long window.innerHeight is approximately as large as the screen.height. Even when the browser has a navigation bar (roughly under 100 px), we can use the screen.size for calculation (otherwise, the background image changes ) when the navigation bar fades out/in (and I think this was the reason why I added the 100px, to prevent the background image size from changing when the navigation bar fades). But when we have > than 100 px difference, maybe the format is too different and a calculation of the screen size might give wrong results.

As I told you, I am not completely sure how to counter this issue. When should we use screen.height and when window.innerHeight? On mobile devices (exactly when the navigation bar hides), sometimes it "jumps" a bit, as the calculation seems to be paused.

[bytehead]

IE 10 is dead since a long time - closing 😅