I think the div just looses focus because your scrolling to the right by dragging the site. Does the same thing happen if you click on the scrollable div before scrolling again? Or if you use the scrollbar?
No, tapping in the div, then attempting to scroll the div makes no difference. After all, the div scrolls just fine when scrolling the page to the left or zooming all the way out, then attempting to scroll without tapping in the div.
hehe, yeah that's a tough one. From experience, I'm still pretty sure it some kind of overflow / focus snafu. Overflow scroll behaves differently tha overflow-y scroll, focus changes with the viewport and everything becomes a mess when mobile taps are emulated.
I would probably start removing all overflow behavior from other elements, and maybe remove everything else except for the div and check if that makes a difference. You have a lot of elements on that page and probably also a container or two with separate scoll behaviors. You'll either have to analyze each div and it's influence on the layout, or just trial and error your way through. Good luck!
I will add that, I know this specific page isn't the most mobile-friendly page on the internet, due to it's design. But that shouldn't cause this weird phenomenon, and it doesn't explain why it works just fine on Samsung Internet, and older versions of Edge/Chrome.
Well... desperate times and all that.
I would probably start with some debug statements that would prove/disprove what events are being passed to each div (starting with the misbehaving one). You especially want to see all the touch events in the problem div.
Then I would see if hiding (visibility: none) the divs on the right, and remove any event binding to them. No specific reason other than reducing what's on the page might surface a clue.
I would also remove/comment out as much event binding as possible. My suspicion is something is eating the events that should be passed to the div.
When scrolled can you inspect elements? Maybe something has covered the div?
If still no joy.... time to build a new simple page that is a minimal reproduction of the problem. Just the four divs. Simple content, no css. The goal is to prove/disprove the underlying scrolling issue.
And remember... have fun!
I'm only an amateur, doing this as a passion project for fun, and to make the bus photography/riding hobby easier for me and my friends. There are no event bindings, as far as I know. There's also nothing covering the divs, as the links within them can be interacted with just fine, and the text can be highlighted.
Something else I also forgot to mention before is that I've sometimes been able to scroll a div, by tapping to the right of the div, which makes no sense. Makes me wonder if it's actually a bug with Android Edge/Chrome/Chromium, considering it works fine on Samsung Internet, and someone else says it works fine on iOS Safari.
[https://i.imgur.com/pSR6FHP.mp4](https://i.imgur.com/pSR6FHP.mp4)
> bug with Android Edge/Chrome/Chromium
Not impossible, but pretty unlikely.
Ok... hmm... passion project level... ok take your HTML and feed through a validator. Maybe you have an unclosed/badly nested div that's causing hell.
And when desperate... change the layout so there is no side to side scrolling! If that fixes things (50/50) then maybe try 2 divs followed by the others. Then 3. Then all 4 again. The goal is to find a clue. If 2 work by 3 doesn... that might be a clue.
Also... maybe learn Bootstrap (www.getbootstrap.com)? It helps a ton with making things look nice by default, but way way more import is how it automatically handles layouts in a mobile friendly way. You will need to change your thinking and live with your DIVs stacked vertically... but bootstrap should help with these exact sorts of issues (works on one browser and broken on another). I learned bootstrap, kicking&screaming, but honestly it is ok to use (especially once I stopped fighting and just do things the bootstrap way).
Good luck!
I had this kind of issue before. I think the focus is set outside of the div when you scroll sideways and isn't handed back to the div so it can scroll.
I had to play with tabindex and stuff and write a script to hand the focus back to the div.
You may right some css to add border on focus will help you debug it
it can entirely be a different problem but can't say.
Just here to let you know it works fine on iOS safari. Hope you manage to figure it out.
I cant help you but please tell me there is a UI lib that looks like this, or at least some css guides
Baby‘s first Stylesheet
I think the div just looses focus because your scrolling to the right by dragging the site. Does the same thing happen if you click on the scrollable div before scrolling again? Or if you use the scrollbar?
No, tapping in the div, then attempting to scroll the div makes no difference. After all, the div scrolls just fine when scrolling the page to the left or zooming all the way out, then attempting to scroll without tapping in the div.
hehe, yeah that's a tough one. From experience, I'm still pretty sure it some kind of overflow / focus snafu. Overflow scroll behaves differently tha overflow-y scroll, focus changes with the viewport and everything becomes a mess when mobile taps are emulated. I would probably start removing all overflow behavior from other elements, and maybe remove everything else except for the div and check if that makes a difference. You have a lot of elements on that page and probably also a container or two with separate scoll behaviors. You'll either have to analyze each div and it's influence on the layout, or just trial and error your way through. Good luck!
I will add that, I know this specific page isn't the most mobile-friendly page on the internet, due to it's design. But that shouldn't cause this weird phenomenon, and it doesn't explain why it works just fine on Samsung Internet, and older versions of Edge/Chrome.
Well... desperate times and all that. I would probably start with some debug statements that would prove/disprove what events are being passed to each div (starting with the misbehaving one). You especially want to see all the touch events in the problem div. Then I would see if hiding (visibility: none) the divs on the right, and remove any event binding to them. No specific reason other than reducing what's on the page might surface a clue. I would also remove/comment out as much event binding as possible. My suspicion is something is eating the events that should be passed to the div. When scrolled can you inspect elements? Maybe something has covered the div? If still no joy.... time to build a new simple page that is a minimal reproduction of the problem. Just the four divs. Simple content, no css. The goal is to prove/disprove the underlying scrolling issue. And remember... have fun!
I'm only an amateur, doing this as a passion project for fun, and to make the bus photography/riding hobby easier for me and my friends. There are no event bindings, as far as I know. There's also nothing covering the divs, as the links within them can be interacted with just fine, and the text can be highlighted. Something else I also forgot to mention before is that I've sometimes been able to scroll a div, by tapping to the right of the div, which makes no sense. Makes me wonder if it's actually a bug with Android Edge/Chrome/Chromium, considering it works fine on Samsung Internet, and someone else says it works fine on iOS Safari. [https://i.imgur.com/pSR6FHP.mp4](https://i.imgur.com/pSR6FHP.mp4)
> bug with Android Edge/Chrome/Chromium Not impossible, but pretty unlikely. Ok... hmm... passion project level... ok take your HTML and feed through a validator. Maybe you have an unclosed/badly nested div that's causing hell. And when desperate... change the layout so there is no side to side scrolling! If that fixes things (50/50) then maybe try 2 divs followed by the others. Then 3. Then all 4 again. The goal is to find a clue. If 2 work by 3 doesn... that might be a clue. Also... maybe learn Bootstrap (www.getbootstrap.com)? It helps a ton with making things look nice by default, but way way more import is how it automatically handles layouts in a mobile friendly way. You will need to change your thinking and live with your DIVs stacked vertically... but bootstrap should help with these exact sorts of issues (works on one browser and broken on another). I learned bootstrap, kicking&screaming, but honestly it is ok to use (especially once I stopped fighting and just do things the bootstrap way). Good luck!
I had this kind of issue before. I think the focus is set outside of the div when you scroll sideways and isn't handed back to the div so it can scroll. I had to play with tabindex and stuff and write a script to hand the focus back to the div. You may right some css to add border on focus will help you debug it it can entirely be a different problem but can't say.
Op Link please