PIE icon indicating copy to clipboard operation
PIE copied to clipboard

opacity issue with PIE 2.0 Beta

Open ymorin007 opened this issue 11 years ago • 4 comments

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

ymorin007 avatar Feb 09 '13 17:02 ymorin007

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

lojjic avatar Feb 18 '13 20:02 lojjic

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?)

JorisDebonnet avatar Feb 23 '13 16:02 JorisDebonnet

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.

lojjic avatar Mar 17 '13 22:03 lojjic

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?).

JorisDebonnet avatar Mar 18 '13 10:03 JorisDebonnet