CSS3 PIE Forums
http://css3pie.com/forum/

Using CSS3 PIE.htc with jQuery
http://css3pie.com/forum/viewtopic.php?f=3&t=3650
Page 1 of 1

Author:  julmot [ Thu Dec 04, 2014 3:33 am ]
Post subject:  Using CSS3 PIE.htc with jQuery

Hi,

I am using PIE.htc in combination with jQuery. Unfortunately, after using border-radius with PIE.htc in IE8, jQuery fadeIn and fadeOut methods do not work any more.

Example-code: After implementing PIE.htc and border-radius into it, it does not work any more.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
button, span {display: block; float: left; margin-right: 0.5em;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span style="display: none;">This is some text.</span>
</body>
</html>


How to fix this issue?

Author:  jason [ Tue Dec 09, 2014 12:11 pm ]
Post subject:  Re: Using CSS3 PIE.htc with jQuery

Elements rendered by PIE can not have their opacity changed, so fading won't work. You should be able to wrap it in another element and do the fade on that outer element.

Author:  julmot [ Tue Dec 09, 2014 12:28 pm ]
Post subject:  Re: Using CSS3 PIE.htc with jQuery

Why can elements with PIE not have opacity?

Author:  jason [ Fri Dec 12, 2014 10:09 am ]
Post subject:  Re: Using CSS3 PIE.htc with jQuery

There are technical limitations that have prevented it:
- IE's lack of true opacity support means you have to use their proprietary alpha() filter, which has very poor rendering quality when used on things like antialiased text.
- PIE's rendering involves two layered elements, which means that they cannot be faded as a single unit; the best we could do would be to fade each one individually, which is unfortunately not the same result.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/