Javascript "toggler" function not working in IE9 or IE10 (IE8 has a fallback in place) but working in IE11, Chrome, Firefox

Question

I rewrote for Prototype and Scriptaculous a formerly beautifully working and compatible MooTools "toggler" system that allows for the appearance that two different HighCharts graphs get switched between in the same space on the page. It works great in IE11, Chrome, Firefox, Safari, but specifically the "toggling" system does not work in IE9 and 10. Both the HighCharts are rendered properly, but the .setStyle .appear and .fade don't seem to be affecting the CSS at all.

document.observe("dom:loaded", function() {
$("rdb1").observe("click", function(){
        $("2253-2").setStyle({'opacity': '0'}),
        $("2253-2").setStyle({'top': '-9999em'}),   
        $("btnID-2").fade({duration: .01}),
        $("zoomOut-2").fade({duration: .01}),
        $("2253-1").appear({duration: .1}), 
        $("2253-1").setStyle({'top': '0'}),
        $("btnID-1").appear({duration: .01}),
        $("zoomOut-1").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
$("rdb2").observe("click", function(){
        $("2253-1").setStyle({'opacity': '0'}),
        $("btnID-1").fade({duration: .01}),
        $("zoomOut-1").fade({duration: .01}),
        $("2253-2").setStyle({'top': '0'}),
        $("2253-2").appear({duration: .1}), 
        $("btnID-2").appear({duration: .01}),
        $("zoomOut-2").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
});

and the html:

<div id="legendwrap" class="noPrint">               
    <h4 class="chartViewLabel">View:</h4>               
    <label class="viewSelectBtn"><input id="rdb1" type="radio" name="toggler" value="1" checked/>&nbsp;&#37;T</label>               
    <label class="viewSelectBtn"><input id="rdb2" type="radio" name="toggler" value="2" />&nbsp;OD</label>          
</div>          

<div id="zoomwrap" style="float:left;text-align:left;margin-top:-1px;margin-left:2px;zoom: 1;display: block;z-index:2;overflow: hidden;" class="noPrint">
    <button id="zoomOut-1" class="btnz" style="z-index:2;position:relative;" ><i class="fa fa-search-minus"></i></button>               
    <button id="zoomOut-2" class="btnz" style="z-index:3;position:relative;opacity:0;"><i class="fa fa-search-minus"></i></button>          
</div>          

<div id="buttonwrap" style="float:right;text-align:right;margin:0 12px 0 10px;overflow: hidden;zoom: 1;display: block;">                
<div id="btnID-1" class="toHide" style="position:relative;padding-top:0px;overflow: hidden;zoom: 1;display: block;">                    
    <button id="helpBtn" class="btnz" ><i class="fa fa-question"></i></button>                  
    <button id="printit" class="btnz" ><i class="fa fa-print"></i></button>                 
    <button id="exportPNG" class="btnz" ><i class="fa fa-file-image-o"></i></button>                    
    <button id="exportPDF" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                  
    <button id="exportCSV" class="btnz" ><i class="fa fa-file-text-o"></i></button>             
</div>              
<div id="btnID-2" class="toHide" style="position:relative;opacity:0;overflow: hidden;zoom: 1;display: block;">                  <button id="helpBtn2" class="btnz" ><i class="fa fa-question"></i></button>                 
    <button id="printit2" class="btnz" ><i class="fa fa-print"></i></button>                    
    <button id="exportPNG2" class="btnz" ><i class="fa fa-file-image-o"></i></button>                   
    <button id="exportPDF2" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                 
    <button id="exportCSV2" class="btnz" ><i class="fa fa-file-text-o"></i></button>                
</div>          
</div>

<!--Line break and margin correction-->
<div id="clr0" class="clr" style="clear:both;line-height:0;">&nbsp;</div>   

<!--Render the chart--> 
<div id="graphwrap" style="position: relative;left: 0px;height:500px;">             
    <div id="2253-1" class="toHide" style="position:relative;margin-bottom:-500px;" ></div>
    <div id="2253-2" class="toHide" style="position:relative;opacity:0;top:-9999em;" ></div>
</div>  

A site version example is here: http://buy.alluxa.com/317-5-1-5-od6-ultra-narrow-bandpass.html

I'm pulling my hair out with this one. Any tips or even a hunch would be appreciated. Thanks so much.

Answer 1

SOLVED Magento v 1.9.1 comes with an old Prototype.js version 1.7. I upgraded to Prototype 1.7.2 and it solved my IE9 and 10 issues. Nothing wrong with my code above.

Something about handling opacity with .fade and .appear, even .setStyle wasn't working properly. It's fixed with the latest prototype.js version 1.7.2 available here: http://prototypejs.org/