I noticed that when I inertia scroll my webpage within a WebView on ios, the fixed navbar disappears...and then when the scrolling stops, the navbar reappears.
I assumed that a fixed navbar would stay fixed and visible all the time. I already tried disabling the inertia scroll by adding -webkit-overflow-scrolling: auto; to my body element, but that did not change the scrolling at all so it did not fix the disappearing.
When I viewed/scrolled my website within Safari, the navbar stayed visible all the time.
Conclusion is, it has to do with webview controller and maybe some property that needs to be set.
I will search stack for that, but in the meantime, if anyone has ideas on how to prevent this please let me know.
All help/feedback is appreciated.
Update: Reading other posts, this may be an iOS11 issue. Now that I think about it, the webview worked fine until recent update. I will update question if solution found.
I found the problem to be with UIWebView.
Using WKWebkit fixed the issue for me as it is the apple recommended view for web content since the update.
Related
When I write my horizontal scroll box inside the view-content, it does not work...However if move it out of the view-content, it can work... Does anyone know what's wrong? I guess some css for view-content? However I don't know what's the default code...
May be this is due to the double scrolling at same position which you may not able to proper scroll at iOS. We can do the same ar brower because scroll and drag is different in browser.
I created simple web page using semantic ui library: http://cvhunter.net/m
Scrolling vertically is glitching on iphone sometimes especially first scrolling try.
How can i fix this ?
Thanks.
I fixed my problem, it is causing because of overflow-x:hidden at container div.
I'm using the webkit-overflow-scrolling:touch property on an iOS/Android WebApp and it works in most cases and provides a native scrolling experience without Rubberband Scrolling.
Now the issue is, when the div that needs to be scrolled isn't tall enough the rubberband scrolling will happen again. I tried setting height:100% but that didn't help either.
Any ideas?
I've come across this when I made a Cordova iOS app. You can fix this by applying min-height: 101%. Though, that would make your page scrollable for a minor distance but it will trigger the desired effect you're looking for.
I want to create a wysiwyg-editor for ipad and have a toolbar with position:fixed - so that it's always available.
However, when I focus on div with contentEditable="true" the toolbar is not fixed any more.
Is this a bug?
Is there a workaround?
just found this while looking for the same thing - for the same reason...
we have a half-way solution to the toolbar, but it sort of wanders off-page and then resets to the correct position when the scroll finally stops. The solution isnt pushed to github yet, but it will be in the next couple of days. Best approach we have so far is a chunk of JS that forces the div back in place if we recognise we are working on iOS :-(
But you might want to check the editor we built in any case :-) http://www.quink.mobi or https://github.com/IMD-Business-School/Quink.
This is frustrating and I have seen and tried many answers but still end up with a zoomed effect on my webpage when I view on iOS. I have experimented with various viewport settings but the initial view is always zoomed.
Here is the experimental link. The page has a fixed header and footer and looks and functions fine in web browsers but in iOS it looks zoomed in. If I double tap, it resumes the desired view.
http://jbrubaker.fatcow.com/dealer/index2.html
Viewport settings:
Is it a CSS issues?
A fixed element issue?
Thanks in advance.
Assuming that you are using UIWebView to view the site.
Set the BOOLEAN scalesPageToFit property of your UIWebView to YES.
This would hopefully solve your issue. If not then get back with your comments