CODEWITHSUNDEEP
ioscssoverflow
Zubaja
Zubaja

Reputation: 261

overflow:hidden on a div not working properly - iOS

As of now I'm running into an issue when it comes to testing a website on iOS devices. It seems a DIV element does not carry its overflow:hidden property well. Or at all, really.

This is what the site's layout should be (with the overflow-setting working):

overflow:hidden working as it should

This is what the layout is like on an iOS device:

overflow:hidden not working is it should

I've tried many things, such as editing the body and html css overflow and/or position properties, adding a wrapper around the body tag and many more 'mainstream' solutions I came across while googling. None worked, sadly.

The CSS for the item not properly working on iOS is this:

width: 94.4%;
height: 400px;
overflow: hidden;
position: relative;
margin: 0px;
display: inline-block;
box-sizing: border-box;

How'd I know (or at least think) it's the overflow? As soon as I turn it off in the browser through inspecting the element, the issue happens.

Is there anybody who can give me some insight into the issue? If you need any more information, I'd be happy to provide.

Upvotes: 0

Views: 1231

Answers (1)

Zubaja
Zubaja

Reputation: 261

As Demnogonis suggested in a comment to my original post, I added

vertical-align: top

And now the layout is fixed on iOS devices.

Upvotes: 2

Related Questions