all
I am facing an issue on safari ipad (both ios 7 and 8).
I have a page, in which the left part is a list and the right part is an iframe.
When clicking the list item in the left, the right part will be directed to some page accordingly.
I need to support scrolling in the right part (iframe).
Currently, the right part is like:
<div style="display:block; position: absolute; overflow:auto; -webkit-overflow-scrolling: touch"><iframe src = 'xxxxx'>... </iframe></div>
xxx is dynamically generated in javascript when clicking the left part.
when iframe loaded, the page inside the iframe has a floating button bar, clicking the button can jump to different part of the iframe by scrolling it.
Now, when clicking any floating button in the bar, I use document.body.scrollTop = nnn ( or document.documentElement.scrollTop = nnn ) to scroll to different part. It works fine on desktop browsers (chrome, FF, IE, even safari). And, it scrolls the right part only, not the whole screen, which is what I want.
But, in ipad, in both ios 7 and 8, none of the floating buttons works. When clicked, you can see the iframe flashes, but not scrolls. User can still manually scrolls the iframe though.
Any suggestion on how to make this scrolling work programatically? Or, is this a known issue on ipad ?
Thanks.
Also ran into this post: Scroll iframe using buttons - iPhone, looks similar to my issue.
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) });
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 have a navigation bar which has its position set to fixed. This works fine as expected on browesrs and on mobile browsers as expected. The navigation bar is positioned at the botton of the viewport and everything else scrolls under it.
But then same page when moved to a mobile web view in an app, it render the navigation bar at the very end of the page so that I have to scroll down to see it.
I comes on the device view only when I change the top position to around 50%.
It also seems that if I remove everything from that page with only empty , I still see vertical scroll bar even though my page is empty.
Using position: fixed on mobile devices has several known issues. Among them is the behavior of the fixed element, which doesn't always stay fixed.
Although your problem may be in your code, that may not be the problem since you mention that your nav bar is working well across various mobile browsers.
Here's a review of position: fixed tested across multiple mobile platforms and devices:
Fixed Positioning in Mobile Browsers
Here's an answer I provided to a related question a few days ago:
Enable mobile device users to toggle div between position: fixed and position: static (or 'relative')
Hope this helps. Good luck!
I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.