overflow:hidden not working on Chrome

Question

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 remain overflow:hidden, so the overflowed part of the icon will go out of the titlePanel (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 · Accepted Answer · 2014-09-08 10:23:47Z

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; }

Thank you. But the second part of the code is not related to the problem as far as I know zessk, just the first one. Afer changing to absolute it has been fixed.

Collectives™ on Stack Overflow

overflow:hidden not working on Chrome

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related