Overflow hidden not working on Android
10,475
Solution 1
Had to wrap the image in 2 divs/sections/dd and put overflow:hidden on the inner one. In this case the section.
Before(didnt work)
<dd><img></dd>
Now(works)
<dd><section><img></section></dd>
Solution 2
Overflow:hidden doesn't work on android when the element is relative or absolute position.
The simplest workaround is to have an outer element with relative/absolute and an inner element with the overflow.
<div style="position:absolute">
<div style="width:100%; height:100%; overflow:hidden">
<img>
</div>
</div>
Author by
Jeffha77
Updated on July 26, 2022Comments
-
Jeffha77 almost 2 years
I have a picture displaying in a DD which has rounded corners. When I build it and get it on an android device the overflow:hidden doesn't work and the full picture shows over the dd. Anyone else have this issue and know a workaround/fix?
This is the CSS for the DD.
.empImage { position:absolute; width:90px; height:110px; top:0; right:0; overflow: hidden; background-color: #eaeaea; border: #f26122 solid thin; -moz-border-radius: 15px; border-radius: 25px; -moz-box-shadow: -5px 0px 5px #666; -webkit-box-shadow: -5px 0px 5px #666; box-shadow: -5px 0px 5px #666; }