Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Toggling `visibility` on parent element breaks PIE [elaborate demo included] #244

timmolendijk opened this Issue Sep 23, 2012 · 2 comments


None yet
2 participants

When applying PIE to an element that is implicitly invisible due to visibility: hidden on a parent element, it will not work.

Check out this example: http://jsbin.com/uxerul/1/edit

Notice how all "red pills" show up perfectly after "unhiding" them in different ways, except for the third case: visibility: hidden on a parent element.

This problem does not occur when the element is visible upon startup, then hidden dynamically, and then unhidden again.

I have only tested in IE8.

drenzul commented Feb 13, 2013

Just ran into the same problem with some rounded corners on a drop-down menu I've created.

Damm IE!!! :)

Mine is hidden with display:none on the page load however, when it is first displayed it has the same problem, 2nd and future displays work fine.

It looks like its just an issue with it not knowing where the element is when it is hidden, I'm trying some alternative tacks to get around this.

drenzul commented Feb 13, 2013

Hmmm, also tried not having it hidden at the start then hiding it in JS.... it errors differently but the CSS3 container just has a position of top: 0; left: 0; for the first mouse-over, after that it grabs the correct top and left values and works properly.....

Not sure how to fix this since its now visible on page load, if I don't hide it in the JS then it works fine but even adding a bit of code to hide it after it has first displayed causes problems, even when using .ready() to make sure the element has fully loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment