overflow:hidden on a div not working properly - iOS

Question

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):

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

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.

Try adding vertical-align:top to your CSS. This might fix it. — Demnogonis
– Demnogonis, Commented Dec 7, 2016 at 13:49
Need all your HTML and CSS, its impossible to work out whats going on without it — James King
– James King, Commented Dec 7, 2016 at 13:54
@JamesKing The amount of HTML and CSS this project has is enormous: I can assure you it wouldn't fit in a comment :) — Zubaja
– Zubaja, Commented Dec 8, 2016 at 8:47
@Demnogonis I'll try that out as soon as I get to the office. Thanks for the tip! — Zubaja
– Zubaja, Commented Dec 8, 2016 at 8:47
@Demnogonis This fixed it. I'll add it as the answer. Thanks again! — Zubaja
– Zubaja, Commented Dec 8, 2016 at 10:41

Zubaja · Accepted Answer · 2016-12-08 10:43:26Z

2

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

vertical-align: top

And now the layout is fixed on iOS devices.

answered Dec 8, 2016 at 10:43

Zubaja

2615 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

overflow:hidden on a div not working properly - iOS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related