I have a bilingual site with two versions Arabic and English. In Arabic version on <body> I have applied style="direction:rtl" . This is causing an issue to a horizontal scrollbar. When I resize the screen to minimum resolution or zoom-out the screen the scrollbar not appearing seems like overflow-x: hidden property is set to it. I tried to overflow: scroll but it's not working. Anyone can please help.
This is a bug in Firefox, if you try it in Chrome it works.
You've just met Bug 992384, probably (another) regression of Bug 192767.
They're working on it, stay tuned ;)
Related
Maybe someone knows how can I resolve the next problem.
I have attached a video to show my problem.
https://i.gyazo.com/ab9b7663b65fbf6d596897367ec3c565.mp4
There is something that covers my content when I am trying to scroll some areas of the project.
And it happens only on Safari on mobile devices.
This issue appeared because I redefined the scroll in all my project. So I have fixed this bug by setting 'overflow: hidden' to the body.
I'm having issues with some strange padding on the right side of this website I'm working on right now. I'm currently viewing it on a 13" Macbook Pro, full-screen within that viewport. (It has a lot of issues on the smaller viewports that I'm aware of; I haven't gotten to that point in the process.) I've inspected it thoroughly with the developer tools in Chrome but haven't been able to find anything to account for the padding-right or margin-right that's creating the horizontal scroll.
It's currently built with Bootstrap and Flexslider.
Link to repo: https://github.com/helenvholmes/designshow
Thanks!
The horizontal scrollbar also appears on Chrome 25 on my Win 8 64 system, regardless of width.
Try adding overflow: hidden; to the rules for div.flexslider.
That removed the horizontal scrollbar for me and appeared to leave everything else intact. However, please be warned that I haven't tested all the content thoroughly, so look carefully to see if that rule has other unwanted side effects.
How does that work for you?
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
I uploaded a modified version of my website earlier. It seems to work fine on my computer, but then I check my laptop downstairs, (small screen), and there doesn't appear to be a scroll bar to scroll down and see the navigation, so you're just left with a big image that doesn't do anything.
It's http://www.peach-designs.com - it'll only be up for a short time though as it doesn't yet work on small screens.
Hope you can help,
Kind Regards,
Snakespan
When I view the site in Chrome, the image covers the navigation because of the z-index ordering. Removing the z-index from #slider and the ul fixed the problem for me.