overflow:hidden not working on Chrome
Biomehanika
I am working on testing a site on all browsers before starting device adapting with media queries.
I have found an issue: when any element is dynamically affected, the overflow:hidden property does not work anymore for that element on Chrome.
You can see it here: http://germanalvarez.net/5/
After loading the site, click on the MENU button on the bottom right of the panel, and click on any section:
If you are in Chrome, the top part of the panel (classified as
.titlePanel) will no longer remainoverflow:hidden, so the overflowed part of the icon will go out of thetitlePanel(see image). This only happens when changing section.If you are in Firefox, even after changing section it will remain hidden, so here, it works OK.
I found a supposed solution on the web: style elements on its tag. If you check my code you'll see .titlePanel has this opening tag, but it doesn't work either:
<div class="panel titlePanel expanded" style="overflow: hidden;">
zessx
This is caused by the use of position: fixed :
.titlePanel [class^="icon-"]:before,
.titlePanel[class*=" icon-"]:before {
font-size: 16em;
left: 79%;
line-height: 100%;
margin: 0 0 0 50px;
position: fixed;
}
As you're using fixed, your pseudo-element is totally out of the flow. It's no longer affected by any overflow: hidden on its parents.
To fix it, remove this fixed position and use absolute instead :
[class^="title-"] {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
[class^="title-"] i {
position: absolute;
right: 0;
top: 0;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Firefox overflow:hidden not working as it does in Chrome/IE
- 2
Button overflow hidden not working
- 3
tbody overflow hidden not working
- 4
Overflow hidden not working on hover
- 5
Overflow: hidden is not working with images
- 6
Overflow hidden not working on Android
- 7
CSS overflow:hidden is not working
- 8
Why overflow:hidden is not working?
- 9
overflow : hidden not working on Firefox
- 10
Issue with overflow:hidden on mouseover in Chrome
- 11
Flexbox and overflow: hidden not working properly
- 12
Issues with overflow:hidden in Chrome on a 'retina' display
- 13
Problems with overflow-x:hidden; in Chrome & Firefox
- 14
Issues with overflow:hidden in Chrome on a 'retina' display
- 15
Why is overflow: hidden not working on my div?
- 16
Why isn't overflow: hidden working?
- 17
Overflow-x:hidden; on mobile device not working
- 18
Using flexbox and overflow hidden & scroll not working in Firefox?
- 19
Overflow hidden not working for absolutely positioned elements
- 20
CSS wrapping text with overflow hidden div not working?
- 21
overflow-x: hidden, is not working in safari
- 22
Overflow hidden with floated children not working in Shadow DOM
- 23
-moz-overflow: hidden not working in firefox
- 24
Using flexbox and overflow hidden & scroll not working in Firefox?
- 25
overflow:hidden on a div not working properly - iOS
- 26
Overflow hidden is not working with absolute element in safari
- 27
Hidden overflow not working with flexbox and margin auto
- 28
Overflow-y not working when overflow-x is hidden?
- 29
Overflow: scroll not working in absolute positioned div with parent overflow: hidden
Comments