Jump to content
Search Community

Draggable - Android issue with "position: fixed"

Simon.Gioffredi test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

First of all, sorry for my english, I'm not an english native speaker.

 

I have an issue on Android, and I don't understand why.

 

I try to do a navigation bar, places at the bottom of the screen, who become a slider when the nav width is bigger than the window.

 

That's works everywhere, except in Android.

If you go to the Codepen on an Android :

  • When you arrive, you can slide in the nav without problems
  • But when you scroll in the page, then try to slide, that's not working anymore

 

If I remove the bottom: 0 on the nav, that's work like a charm, but I can't do that because I need it on the bottom (if you add a top, that's not working too, even 1px)

 

If I place the Draggable on the nav, that's work, but I can't do that, because I have other thing inside my nav, and I don't want them to be Draggable.

 

And another thing very strange. If I had a simple border-top: 1px solid white; to the nav, that's not working anymore

 

Anyone has an idea ?

See the Pen RwpjdBj by simon-gioffredi (@simon-gioffredi) on CodePen

Link to comment
Share on other sites

Ah, I misunderstood. I thought the positioning of the nav was broken. I wanted to check whether it was still broken without draggable or whether it was purely a CSS thing.

It still sounds like a CSS bug. I know setting explicit heights on flex children instead of flex-grow can cause some issues on android. 

What happens if you use floats for layout instead of flexbox?

  • Like 1
Link to comment
Share on other sites

There is exactly the same effect. 

Without scrolling, at the top of the navigator, that's work, if I scroll, that's stop working.

 

I already tried this.

 

I didn't test to use a proxy as a slider, and move the ul.

Maybe, if the proxy isn't in fixed, that can works, but I'm not used to play with proxy in Draggable 😕

Link to comment
Share on other sites

Thanx for your time btw.

But no, that's not working. That's exactly the same result as before

 

I'm looking on Chrome on a Xiami, but our client and my colleagues looks on different devices and navigator (Chrome, Firefox), and the issue is everywhere

Edited by Simon.Gioffredi
Add the navigators
  • Like 1
Link to comment
Share on other sites

If you change the container to position absolute does it work?
 

7 minutes ago, Simon.Gioffredi said:

I'm looking on Chrome on a Xiami, but our client and my colleagues looks on different devices and navigator (Chrome, Firefox), and the issue is everywhere

By everywhere do you mean 'on android devices' as I'm on IOS and it's ok on both safari and chrome.

Link to comment
Share on other sites

Heya :) ... I can confirm this happening on Android. 

 

Interestingly enough, I can also reproduce the same behaviour on Desktop (Windows) in Chrome dev-tools mobile view when selecting 'Responsive' or an Android device. When I change to a device like iPhoneX or iPad for instance, the malfunction goes away and it works as expected 🤔 ...that's a new one to me.

 

Not sure if this is helpful at all though.

  • Like 2
Link to comment
Share on other sites

2 minutes ago, akapowl said:

Interestingly enough, I can also reproduce the same behaviour on Desktop in Chrome dev-tools mobile view when selecting 'Responsive' or an Android device. When I change to a device like iPhoneX or iPad for instance, the malfunction goes away and it works as expected 🤔 ...that's a new one to me.


1_hDhKWYG4q4BcKsdXXvyi4Q.png

  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...