opacity issue with PIE 2.0 Beta #258

Open
ymorin007 opened this Issue Feb 9, 2013 · 4 comments

Comments

Projects
None yet
3 participants
@ymorin007

If applying radius in conjunction with a rgba color opacity it will work but if you add radius AND shadow with a rgba color then opacity won't work.

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 0 10px black;
-moz-box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px black;
background:rgba(0,0,0,0.5);
-pie-background:rgba(0,0,0,0.5);
behavior:url(/files/PIE_uncompressed.htc);

@lojjic

This comment has been minimized.

Show comment Hide comment
@lojjic

lojjic Feb 18, 2013

Owner

Are you maybe just seeing the opaque shadow issue described in issue #12 ?

Owner

lojjic commented Feb 18, 2013

Are you maybe just seeing the opaque shadow issue described in issue #12 ?

@JorisDebonnet

This comment has been minimized.

Show comment Hide comment
@JorisDebonnet

JorisDebonnet Feb 23, 2013

I think I have the same issue. It works in PIE 1.0.0, but it does not work with PIE 2.0b1.

My case: a box has border-radius and box-shadow. A header within this box has a rgba background color.

PIE 1.0.0 correctly shows this header as semi-transparent, while PIE 2.0b1 gives the header an opaque background. (on IE8)

But it doesn't even have to do with the box parent. Even when I remove all the other PIE stuff from the entire page, and only leave the rgba background in, it does not work. So I think there is no need to check conflict issues - it's simply a problem with the rgba implementation.

If you can tell me the best way to create a test-case, I'll do that (jsfiddle or something?)

I think I have the same issue. It works in PIE 1.0.0, but it does not work with PIE 2.0b1.

My case: a box has border-radius and box-shadow. A header within this box has a rgba background color.

PIE 1.0.0 correctly shows this header as semi-transparent, while PIE 2.0b1 gives the header an opaque background. (on IE8)

But it doesn't even have to do with the box parent. Even when I remove all the other PIE stuff from the entire page, and only leave the rgba background in, it does not work. So I think there is no need to check conflict issues - it's simply a problem with the rgba implementation.

If you can tell me the best way to create a test-case, I'll do that (jsfiddle or something?)

@lojjic

This comment has been minimized.

Show comment Hide comment
@lojjic

lojjic Mar 17, 2013

Owner

I've tried reproducing this according to your instructions, and it renders correctly for me in IE8.

The simplest test case would be just a HTML document with markup and CSS that reproduces the issue. I can modify the behavior properties to point to a local copy of PIE.

Something like JSFiddle would work too, but JSFiddle specifically has dropped support for <= IE8.

Owner

lojjic commented Mar 17, 2013

I've tried reproducing this according to your instructions, and it renders correctly for me in IE8.

The simplest test case would be just a HTML document with markup and CSS that reproduces the issue. I can modify the behavior properties to point to a local copy of PIE.

Something like JSFiddle would work too, but JSFiddle specifically has dropped support for <= IE8.

@JorisDebonnet

This comment has been minimized.

Show comment Hide comment
@JorisDebonnet

JorisDebonnet Mar 18, 2013

I looked into this again,.. and I've found that it does in fact work for me, but only if I get CSS3PIE to actually load. That was the problem :)

Simply putting all files into one folder does not work. I had my html file, htc file and the two js files in the same folder, but the .htc file did not succesfully 'find' the js file. One would really expect it to in this case.

I got it to work by simply setting baseUrl to '.' myself. In other words, I would personally drop the if( baseUrl ) condition on line 74 and just make it if( !baseUrl ) baseUrl = '.';.

I know I could have used the -pie-load-path, but preferably it should work without, of course (the blog post about the beta release also says that it should, right?).

I looked into this again,.. and I've found that it does in fact work for me, but only if I get CSS3PIE to actually load. That was the problem :)

Simply putting all files into one folder does not work. I had my html file, htc file and the two js files in the same folder, but the .htc file did not succesfully 'find' the js file. One would really expect it to in this case.

I got it to work by simply setting baseUrl to '.' myself. In other words, I would personally drop the if( baseUrl ) condition on line 74 and just make it if( !baseUrl ) baseUrl = '.';.

I know I could have used the -pie-load-path, but preferably it should work without, of course (the blog post about the beta release also says that it should, right?).

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