I have the problem to keep latest window scroll position after screen orientation has been changed.
For example, on the page
http://www.svoboda.mobi/a/27582777.html
when I scroll to the middle of the screen and then rotate from portrait to landscape or vice versa, the screen position is going to top of the page instead of to keep latest position.
It affects Android phones, iOS, and probably other devices. It's working correctly on Nokia Lumia 520.
I know, that I can use some javascript like
$(window).on(scroll, function() {
//save the current scroll position somehow
});
$(window).on("orientationchange", function(event){
//scroll window to saved position
});
but I don't want to solve that by this way. I still don't know, what is the cause of that? I think it must be some error in CSS, because when I turn off javascript, the problem still occurs. Thank you for help.
Related
I used Vue to create my site and desktop version works perfect. When tested on Mobile IOS Safari and Chrome the page jumps up a bit when scrolled to bottom the first time. Android works fine. This problem doesn't happen the second time you scroll to bottom before you refresh the page. This problem also won't happen if you test it on desktop through dev tools.
The site's profile page does not have this problem.
I made a screen recording of the behavior: https://drive.google.com/file/d/1B93xtwF8f2VWAVegLbsZFULn3TymUCNZ/view?usp=sharing
I converted all the vh values to px to prevent browser reflow like so
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh',${vh}px);
it fixed my layout but didn't help with the jumping problem.
I also tried to set up a fixed height to the body by assigning CSS height values through Jquery .css method, when the fixed height is taller than the actual content, this problem does not happen.
I'm sorry that I don't have a snippet to reproduce this problem, I have no idea where the problem is at all.
My site url is https://www.jingqi.work
The expected result would be without the jumping up movement when scrolled to bottom, basically like how the profile page behaves.
I try to find some workarounds for mobile safari bug:
For example I have a clear html page with
Viewport settings width=device-width, noscalable
Body with position:fixed
Two HTMLInputs created by js and placed to center of screen
All works fine on ever devices but on Iphones 6 plus and 7 plus we have a great problem:
If I've focus input and then hide keyboard, all window positioning become diverged from rendered position. Input could be only focused if I've click ~100px higher of it visible position. Moreover, each additional elements on page (even canvas with webgl content) also will get wrong coordinates on each tap/touchstart and so on.
I've connect iphone for debug, and I can see that browser thinks that input placed not where it rendered. Also i can vertically scroll page with finger, and real rendered inputs will stay in place, but area from browser will moves up and down right up to his rendered position.
Bug could be reproduced only if few tabs opened in browser in landscape orientation (i'll highlight tabs red on screenshot).
Can't reproduced on iphones5-6, because there is no tabs, but also can't be reproduced on ipad, which has the same tabs.
Example is here: http://baker-feather-16713.bitballoon.com/
Problem is the fact that safari allow user to scroll page to fullscreen ever if you set html/body width and height to 100%. So, when keyboard showed content scrolls up despite that body has position "fixed" and it rendered with bug when keyboard becomes hidden.
Solution is very simple: just need to do scrollTo(0, 0) when keyboard hidden, e.g.:
document.addEventListener('focusout', function(e) { window.scrollTo(0, 0) });
On iOS devices, scrolling plugins like Scrollify.js, FullPage.js, and OnePage-Scroll.js seem to keep Safari's address and navigation bars in place, instead of the way they typically minimize when the user scrolls the page.
Is there any kind of workaround for this? I understand that when those UI bars minimize, the inner viewport height is changed, and so the plugin would need to recalculate the height. Also, the UI minimizes during the scroll event, and maybe that's problematic for the scrolling plugin? Is there a way to maybe hide the UI when the scroll event finishes?
When you change the orientation of the iPhone from portrait to landscape, the bars disappear, but if you bring them back by tapping the top or bottom, they stay put when you scroll.
I'd really like to have that extra height!
Is there any kind of workaround for this?
You can also use it without autoscrolling, but that might no be what you are looking for: autoScrolling:false.
If you are worried for the landscape mode, if you avoid using anchors and you load the page in portrait mode to then change to landscape, it won't show the top bar at all on iOS at least. Not the best solution, but it might help.
Personally I would recommend you to use the option responsiveWidth or responsiveHeight to change the behavior of the page on small screen devices and remove the auto scrolling and possibly have bigger sections.
In general, mobile browsers do not allow access to the top or bottom bars behaviors and there's no much developers can use to deal with them.
I want to hide the URL bar from my single-page application by using JavaScript.
I tried to set bigger height of the 'body' element and then perform:
window.scrollTo(0, 0);
But it doesn't work. The URL bar is still visible. How do I solve this problem?
so far it seems it doesn't work on iOS 9, it stopped working after iOS 7.1.
As seen here:
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
For iPhone, you can make your content just one pixel higher than the viewport, that will eliminate the navbar.
Working code example: http://pastebin.com/16s8Xvbw
Caveats:
Only works in landscape, and when flipping from portrait to landscape - if user enters the page in landscape, he/she must flip to portrait and back to landscape.
If the user touches near top / bottom, navbar will re-appear.
Does not work on iPad at all.
I'm doing a simple image gallery with iScroll 5.
Basically I have only 5 images that I can scroll.
If I use clicks and touch (on iPad) works great.
My problem is with trackpads.
So if I try to scroll with trackpad, the scroll jumps from the first image to the last one.
Is there any way I can change the speed of the trackpad?
I'll like not do disable.
Thanks
I think trackpad uses the mouse wheel event, so you can try setting that speed. Try something lower than the default 20.
var scroll = new IScroll('#wrapper', {
mouseWheelSpeed: 20 // the default speed
});
Resource: http://iscrolljs.com/#configuring
did you enable "snap" option?
In that case, the scroll may fire snap action and jump to the bottom (depending on your page or snap settings).
You can adjust the scroll speed by adding snapSpeed option.
Hope it would work.
Ref: Related thread on Github.