animate opacity distortion in IE8

Question

<script type="text/javascript" src="/web/upload/js/jquery-1.8.0.min.js"></script>    
<script type="text/javascript">
    $(function() {
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0)
                $('#header').stop().animate({'opacity':'0'},400);
            else    
                $('#header').stop().animate({'opacity':'1'},400);
        });

        $('#header').hover(
            function (e) {
                var scrollTop = $(window).scrollTop();
                if(scrollTop != 0){
                    $('#header').stop().animate({'opacity':'1'},400);
                }
            },
            function (e) {
                var scrollTop = $(window).scrollTop();
                if(scrollTop != 0){
                    $('#header').stop().animate({'opacity':'0'},400);
                }
            }
        );
    });
</script>

I made a navigation(#header) that fade in/out depend on scrolling and hover. But in only IE8, .png image and text are distorted. I don't know how to solve.

please help :(

IE8 has terrible support for opacity. It really is bad. Trying to animate it (ie fade in/out) in IE8 is always going to be difficult, and will very often have severe bugs that are virtually impossible to work around. My recommendation: Just drop the whole idea of trying to do fade in/out with IE8; in IE8 just have it hide or show without a fade effect. Let the newer browsers have their fun with fading, but quit trying to force old browsers to do stuff they aren't really capable of. — Spudley, Jun 16 '13 at 13:44

alpha pecap · Answer 1 · 2013-06-16T13:44:56.187

0

Older versions of IE render non-antialiased text after doing a fade-in.

If you use the jQuery browser-plugin, you can use the following line after the fade-in, as a workaround to make this somewhat tolerable:

if ($.browser.msie) { $('#header')[0].style.removeAttribute('filter'); }

edited Jun 16 '13 at 13:44

answered Jun 16 '13 at 13:38

alpha pecap

353
3
11

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

In IE6 through IE8, the opacity property doesn't exist.

Instead, for those older versions, filter:alpha(opactiy:[value])

eg: http://www.w3schools.com/css/css_image_transparency.asp

Also Layout may be a problem. please check the accepted answer to Opacity CSS not working in IE8

You can also try if HTML5 SHIV changes the scenario or not.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 16 '13 at 13:52

Srihari

766
1
6
22

He's using jQuery which simulates the `opacity` property using `filter` behind the scenes, so your answer isn't accurate. However even jQuery can't perform miracles, and there are bugs in IE8's opacity filter which it just isn't possible to get around. Also, html5shiv is **definitely** not relevant to this. It's a completely different thing and has zero bearing on opacity. – Spudley Jun 16 '13 at 14:28

animate opacity distortion in IE8

2 Answers2