This issue seems to affect android only.
I'm working on a phonegap App for a client and I have a scrolling area using jQuery animate. However one of the nested divs doesn't move with it's parent div and stays fixed in position.
Again this issue only presents on android devices and works fine in desktop browsers and iOS.
Can anyone shed any light on what this may be?
Seems jQuery animate runs into issues with relatively positioned items, removed relative position and used margin and it seems to work now.
Related
I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.
I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.
I've created a virtual-rendering implementation (similar to what you would find in the project SlickGrid). Everything seems to be working very well, with one problem: On Mac, smooth scrolling (the rubber-banding and fade-to-stop) doesn't work on my element when I add overflow: auto??
http://syntaqx.com/infiniload/
Any help would be appreciated.
You can use JS Librarys:
https://github.com/ftlabs/ftscroller
FTScroller is a cross-browser Javascript/CSS library to allow touch,
mouse or scrollwheel scrolling within specified elements, with
pagination, snapping and bouncing support.
I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?
The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.
How can i have a section in iPhone web site(header) to remain in a fixed position and rest of the site to scroll(preventDefault or watever) so that it behaves like a native app...any safari api's or javascript that i can use to do this?
I think i found the solution for you: iScroll by Matteo Spinelli (Demo)
The overflow:scroll for mobile webkit.
Project started because webkit for
iPhone does not provide a native way
to scroll content inside a fixed size
(width/height) div. So basically it
was impossible to have a fixed
header/footer and a scrolling central
area. Until now.
If I understand that right you want an element staying at a fixed position? Have you tried creating a div and setting it's css attribute position to fixed? See here: CSS Property Position