I'm having a problem with overscrolling a div in mobile safari. I have a nested structure with body { position: fixed }, inside which I have a parent and a child div. The container div has: .container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } and a max-height property that is set dynamically by javaScript.
When I overscroll the container in mobile safari beyond the content of the child-div (kicking in the 'overscroll' or 'elastic / rubber-band' scroll effect, I get all kinds of jitters, as shown here:
I've scoured SO and every other resource I could find but to no avail. One piece of info I feel is likely relevant:
If i disable scrolling on the element, I can drag the screen as if I was attempting to scroll and sometimes I can get the bottom of child content to disappear and reveal the background of the container div of about ~40px on iPhone. It's roughly the size of the control bar at the bottom, but appears ABOVE the control bar.
I also read in a deeply buried comment that there was once a bug with safari triggering resize events on scroll, but I've set event listeners to alert if a resize event is triggered to test, and haven't gotten that to occur.
I'm lost as to what to search for to remedy this. Ideas on what is causing this?
Note: FWIW, this is being built in React with create-react-app.
Related
I'm currently working on my very first personal page! I'm getting horizontal scroll on smaller media queries where I shouldn't and I cant track down the culprit. All containers are set to 100% width and have their overflow-x hidden. Once the page reaches 1200px in width the side navigation collapses, however once you toggle the 'hamburger' the menu should slide out and push the contents of the main section out and hide the overflow until an anchor point is selected in the menu. At which point the page should shift back to where it was and scroll to the desired section. Something I didnt notice until I turned on touch simulation in the dev tools is that its completely busted on mobile with touch, however working fine with browser scroll in mobile view.
If anyone has any thoughts please let me know, you can find my site here: https://imaleks.dev/
Sorry in advance if this breaks any ettiquite new to all this.
I think, when all you containers are width: 100% + translateX(290px);, and this is more then 100%. You should toggle some class to a body with overflow-x: hidden; when the mobile menu is active.
Or you can keep overflow-x: hidden; for body permanent. This will completely disable horizontal scroll.
I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bit. It happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down. The elements are actually visible where they should be, but touch events and inspecting via Chrome dev tools shows it is misplaced.
This screenshot shows this weird behavior:
remote device inspect
I have tried forcing hide/show after focus in/out of inputs. I also tried the footer inside the container and after it. (and some other stupid ideas that didn't help). I thought about changing the element in every scroll, but this page has a form with 150 questions (some with sub-questions) and already is quite heavy.
Any ideas?
On flowen.me, I'm using the PIXI canvas to generate an effect (it's my photo with a scroll effect).
I have tried different elements with overflow: body, div child of body containing all other elements, parent element itself, etc. But the horizontal scroll bar always appears. Whether I use overflow-x or just overflow.
I tested this on my Chrome browser, iPhone SE, latest IOS and on my MacBook Pro. All sharing the same results.
Anyone have a suggestion or workaround?
didn't search correctly before I posted, this gave me the answer:
How to hide canvas content from parent rounded corners in any webkit for Mac?
a position:relative to the element with overflow hidden
High level: What kind of things can prevent the mouse wheel from being interpreted properly for scrolling? What are some debugging tools to check these?
I have a section of my page that is correctly displaying a vertical scroll bar. However the scroll wheel on the mouse fails to scroll the section unless the mouse is directly over the scroll bar.
What I believe is the relevant div has overflow-x: hidden and overflow-y: auto.
These are coming from the Zurb Foundation Apps CSS. I have, unfortunately, been unable to replicate this behavior within jsfiddle, so I'm hoping for further investigative tips.
This appears to relate to Foundation Apps grid-block classes. If you have a grid-block which has a single child grid-block this can somehow prevent the scroll wheel working.
I ended up replacing the child grid-block with a raw, full-width div.
I found the problem was the grid-frame class, specifically setting the height as 100vh causes the scroll wheel to bug out.
I replaced the grid-frame with a grid-block and didn't use grid-frame at all.
I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...