From my testing this is specific to Safari iOs issue.
The bug is on this page.
Basically on iOS, when expanding the last content item, the browsers doesn't always scroll the content but scrolls the page.
It's inconsistent behavior which happens to the last section item no matter what I do. I've tried adding in another section element to the DOM as a hack to make it work properly but it still behaves the same.
The height is expanded based of max-height parameters so that dynamic content cant be expanded correctly by the js.
Been spending hours looking at this and it's at a point where I need some other eyes to take a look. Thanks for any help you can offer!
Of course it's after asking a question you find the answer.... I was able to fix this by removing a css height rule on a parent container that was using the new vh rule. I changed it to use 100% vs 80vh and it's behaving as expected. Hope this helps someone else.
Related
I've already searched a lot regarding this topic and it honestly seems impossible.
Which is a bummer, since being able to add some small details/artistic touch to this bland area would definitely be very welcome.
Unless I am mistaken and there is a way to do that - please, enlighten!
Afaik no, since it is provided by the app, not by the html code. All scrollviews have this behavior enabled by default.
However a image as backgroundcolor should be visible.
I'm developing a WatchKit app for the Apple Watch. I "finished" the app originally when the first beta was out back in Nov/Dec.
I recently upgraded the the final release and somethings in WatchKit changed (as to be expected). I had to fix couple lines of code here and there since they changed how the app views start up.
Anyway, after fixing the issues I noticed that my WKInterfaceTable displays and scrolls almost correctly. The last row in the table gets cut off (as indicated in the screenshot below). Also, the scrollbar is very short - shorter than it should be (also in the screenshot). Anyone else experiencing this?
In the screenshot, the app has about 10 rows, I just scrolled way to the bottom with a bit of an extra pull just to show the cut-off from the last row... Notice the bottom of the row and the scrollbar at the top right.
I've included extra screenshots that may be helpful. I researched some tutorials on WKInterfaceTable and they're not really doing anything different than I am in the Interface Builder. I'm lost here.
I'm not making ANY UI modifications in code. I'm just letting WatchKit handle the UI as much as possible without any intervention from me.
Thanks!
Other Screenshots:
The scrollbar is short by design, this isn't a bug. That's how it's meant to be.
Regarding the cutting off of the last row, add the table into a WKInterfaceGroup, then set the group's height to 'Size to Fit Content'. That should fix it.
I'm making a website using iScroll4 (cuz I need animations while scrolling on iOS devices) and at a some point, element becomes fixed but it won't work with iScroll4 or I doing something wrong.
So, I used jQuery transit for translateY and I just moving element at the actual scroll position, but this making my element flicker.
Look (scroll a little down) http://danielsitarz.pl/tests/iwanttobefixed/
And I need help, maybe somebody know how to make position:fixed working or make translateY more smooth.
On desktops I don't using iScroll4 but I need this on iPad etc.
Thank you!
Okay, after many travels to work in bus I found an answer.
Just throw element outside iScroll wrapper and then set fixed position to him.
Like that:
$('#wrapper').after(elementThatWantsToBeFixed);
$(elementThatWantsToBeFixed).css({position: 'fixed'});
I am very new to HTML5 development for ipad. I am creating my first application for ipad using HTML5. Everything is done except I am facing one problem. Problem description is.
There is one vertical overflowing div. This page is viewed properly in computer's browser but when the same page is viewed in ipad the overflowing section is cutoff and it appears that there is no overflowing content.
Please let me know the proper way of doing it.
On the iPad scrollable div's using overflow scrollbars will not appear on that div. The only way to scroll is using a two finger swipe.
Joe says that Scrollability is not yet ready to be used, so I wouldn't implement it in a production system.
To do this you have other options like:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
You want native-like scrolling on the iPad in your HTML5 application? You might want to check out a project called Scrollability by Joe Hewitt: http://joehewitt.github.com/scrollability/
Check out https://github.com/appmobi/aux_web (aUX_webScroll) . I'm the author, so if you have any questions, let me know.
iOS5 has the new property to allow scrolling on divs, but you'll find out that when you use it in a webview, the whole webview moves too and surprisingly, not everyone upgrades the OS.
I wrote an article about new features in iOS 5. Also this topic is covered on section -webkit-overflow-scrolling: http://samuli.hakoniemi.net/ios-5-and-new-features-for-web-developers/#webkit-overflow-scrolling
How can I disable the offset scrolling for my webapp?
I mean the dark gray area
http://i.stack.imgur.com/a3Rt4.png
Disable scrolling in an iPhone web application?
I've tried this but it didn't work all the time, it only works sometimes then it suddenly stops and i can scroll again.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
works, but make sure the body has a 100% height of the screen
This completely disables all touch-move events.
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
It freezes your screen in place, giving it a more native feel. But also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: http://cubiq.org/iscroll.
The bottom line is that there are a number of ways to achieve this, but none are documented. They all currently rely on searching through subviews of your UIWebView and modifying their properties - all of these subviews are undocumented, so your results may vary. It is certainly not an ideal way to do things, and as you've found out results can be varied. If you can get hold of the scroll view that is contained within the web view (again, undocumented) you can disable the offset scrolling/bouncing - this link may prove helpful:
http://blog.andrewpaulsimmons.com/2010/02/controlling-uiscrollview-in-uiwebview.html
iOS 5 has an official fix for this, but you'd need to ask at devforums.apple.com or read the new documentation, because everything iOS 5 related is still under non-disclosure and can't really be discussed here.
I wrote this solution for allowing scrollable areas but preventing the body from scrolling when they're visible
https://stackoverflow.com/a/18922984/2009533