search

twbs / ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.
http://goratchet.com
MIT License
14.62k stars 1.45k forks source link

Scrolling problem on Android 4.0.3 #487

Open joshas opened 10 years ago

joshas commented 10 years ago

After scrolling list to bottom on Android 4.0.3 huge white space appears after the ending of list, see attached image. device-2014-03-12-223931 Also, on clicking white space at the bottom, where last list item should be, it gets activated.

Problem seems to be related to: .content > * { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } After disabling this block scrolling works correctly on Android 4.0.3 default browser, minor issue is that there's no padding after the list.

eppak commented 10 years ago

I confirm the issue on 4.1x and 4.2x Andorid under Emulation. In my specific case there was an offset on the click, you had to click on a "ghost" element more more pixels bottom.

jacobnijgh commented 10 years ago

I also confirm on the device itself: HTC Sensation XE, android version 4.0.3

mwager commented 10 years ago

I confirm issues with the .content > * { ... rules too on multiple android devices. (all >= android 4.0)

We have a page where there are very simple collapsible lists. if you open one it seems that the browser does not calculate the new doc height and you cannot scroll to the new content.

Removing it fixes the problem.

ilmente commented 9 years ago

Still nothing? I have the very same problem with angularjs ng-repeat list that exceeds the viewport dimension. Items are subjected to slide-left event, but when I scroll the list and swipe on one of those, the swipe is fired from another item, a previous one.

It seems that as I scroll the items, these move faster than my finger, and the result is a list in which the touch coordinates are completely inconsistents. I don't use .class > * { ..., but as I swipe, I add a class to the swiped item with a css3 animation, and it causes the problem.

I'm facing this issue on Samsung Galaxy S3 and Galaxy Ace (android 4.1.2 and 4.2.2).

bampakoa commented 9 years ago

Hi,

Any updates on this issue? I am struggling to find a solution in my app to overcome this problem.

eppak commented 9 years ago

If you remove this it start working:

.content > * { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }

Does't work for you?

bampakoa commented 9 years ago

Yes it works. But breaks other things. Like ng-repeat list as #ilmente notes.

bampakoa commented 9 years ago

Any news about this issue?