-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Background-Stretch calculation incorrect at Notebook Win10 Touch #31
Comments
Hi, Thanks for reporting!
Whats the reason behind this 100px? |
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). 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. |
IE 10 is dead since a long time - closing 😅 |
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
The text was updated successfully, but these errors were encountered: