Overflow-x:hidden; on mobile device not working - html

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)
Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.
Is there a way to fix this? I supplied below part of the head and html / css
The viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The CSS applied to the media queries and they respective elements that overflow
#media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
#media (max-width: 479px){
body {overflow-x:hidden;}
}
And the regular CSS applied to the html / body tags
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.
.hoek {margin: 0 -50px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-ms-transform-origin:left center;
margin-top: -175px;
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index: 20;
}
I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.
I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php

Found the answer actually here on Stack overflow:
The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.
Documentation:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.
The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

Try setting minimum-scale=1 instead of maximum-scale=1.
minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.

I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.
body, html {
overflow-x: hidden;
}
This eliminates the movement left to right on mobiles.
The HTML part is needed, not just body!

As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.
e.g. for my WordPress case:
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}

Try setting minimum-scale=1 instead of maximum-scale=1 or initial-scale=1.
eg.
<meta name="viewport" content="width=device-width, minimum-scale=1.0">

if you applied overflow-x:hidden to the body, you might wanna apply to html too.
body,html {
overflow-x:hidden;
}

My analysis as of September 2021. Tested on Safari and Firefox 37 (iOS 15).
The accepted answer and its SO link are pretty old (2013-2014) and do not seem valid any more.
Also, I find that adding a "wrapping" div on my body is not really elegant and could lead to unexpected behaviour.
The page on which I am working on is pretty simple, there is just one background image that might overflow on the right of the screen for smaller screens.
Applying minimum-scale=1 to the viewport meta tag did not work. This prevents zooming out, but I could still have this ugly scroll on the right.
Applying overflow-x: hidden; on <html> only did not work.
Applying overflow-x: hidden; on <body> only did not work.
Applying overflow-x: hidden; on both <html> & <body> did work.

This can be resolved without needing to include minimum-scale=1. While that property does prevent the user from zooming and scrolling out, it doesn't resolve the issue of the horizontal scrollbar still appearing, regardless of the fact that the user can't use it.
The way I resolved this issue was by having the following viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Next, you need to make sure that your html and body elements have the following properties...
html {
...
overflow-x: hidden;
}
body {
...
position: relative;
overflow-x: hidden;
}
These properties should make it so that any type of horizontal overflow doesn't show, nor will the horizontal scrollbar be present. This also allows you to lock page-scroll in case of a modal or some other reason on both mobile and desktop by simply passing overflow: hidden to the html element.

If you are using tailwind css in next js and you are using a function to display or hide the sidemenu then it will works for you.
const toggleCart = () => {
if (ref.current.classList.contains("hidden")) {
ref.current.classList.remove("hidden");
ref.current.classList.add("translate-x-0");
} else if (!ref.current.classList.contains("hidden")) {
ref.current.classList.add("hidden");
}
};
Set the sidebar or your div initially hidden and will works fine in your phone. Don't use translate-x-full. It will cause the overflow in mobile device in my case

I found that applying:
overflow-x: hidden
to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hidden and left the body as visible. This worked perfect for me in all browsers and devices I needed.

Even though you are creating a parent container to apply the overflow: hidden; , the overflow property will not work on position: absolute;. Because position absolute moves the targeted element out of context with the document structure.
It has to be position: relative;

Had the same kind of problem with a toggle menu for mobile users, put it off screen so it would appear when the user clicked on the menu bar, solved applying overflow-x:hidden to my section tag.

Related

Hidden overflow and sticky elements

I want to prevent horizontal overflow for the body of the page and allow sticky elements at the same time. The solution seems simple at a first glance:
html {
overflow-x: hidden;
}
Everything works as expected on desktop. If you test it on mobile devices or choose a mobile device in Chrome dev tools, this will fail to work though. Apparantly, because touch devices ignore overflow-x: hidden for html and body tags as it's pointed out in many answers here on SO. So we have to use this instead:
html, body {
overflow: hidden;
}
However, this breaks sticky positioning. I know specifying the body height explicitely should fix the issue:
html, body {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}
Voila, everything seems to work well on mobile and desktop devices. However, this breaks window.onscroll event because it's the body that is scrolling now. So most of the scroll dependant libraries will fail to work (e.g. AOS). I kind of gave up at this point. Anybody has a solution to this? I'd love to avoid JavaScript solutions if possible.

Div will not maintain width in Safari on an iPad

So i have a ridiculous problem, that ought to be obvious and simple yet I can't seem to find out what the problem is.
I have a div on a page that uses bootstrap.
The code for that div is as follows:-
.appSection{
background-color: #000000;
padding:20px;
border:1px solid #67c1dd;
margin-bottom: 30px;
display: block;
width: 100%;
min-height: 450px;
}
Its a child of a div wrapper col-md-12.
This display fine in most browsers I've used; however, when the div does not contain much content or text at the head of the div, on the iPad the div collapses as shown in the right side of the attached image. Sometimes it can literally be collapsed almost completely to the right of the underlying menu.
Any clues?
You haven't given us enough information to go off. If we could see a sample of you html and css that would be great.
If you are reviewing it on iPad in portrait, then your "col-md-12" class on the parent div is not being applied, as that starts at 992px. That is probably 'part' of your problem. It's not the root cause though. but with nothing else to go on, try changing it to "col-xs-12" and see if that fixes it.
I've found the problem.
I had this meta tag at the top of my page, when I removed it, the problem was resolved:-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Disable horizontal vertical scrolling iOS

I am in the process of making a web app and would like to disable horizontal overflow (elastic band) type scrolling.
I have tried everything I can think of and find on here including the following:
html, body {width: 100%; overflow-x: hidden;}
But nothing seems to be working...
The url I am wanting this to work on is this:
http://winn-brown.co.uk/shmee-feed/index.html
Thanks
Add overflows to your body as bellow.
body {
overflow: hidden;
overflow-y: auto;
}
Let me know if this works for you!
You might want to consider using a viewport tag in your HTML.
<meta name="viewport" content="width=device-width">

Stop web page from scrolling horizontally?

I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix.
<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
}
</style>
Which disables scrolling all together.
What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.
First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)
So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:
max-width: 100%;
Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/
If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.
<style type="text/css">
body {
min-width: 96px;
max-height: 200%;
overflow-x: hidden;
background-color: #FF0; /**/
}
</style>
try this put some content in it

Overriding CSS properties for iframe width

I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.