CSSRulePlugin not working in Edge/IE11?

[Acccent 358 Likes (Leader)]

Hi all,

 

I just ran into a weird thing – CssRulePlugin doesn't seem to work in neither Edge 41.16299.15.0 nor IE 11.192.16299.0.

 

Here is what I'm doing (the old 'animate max-height and set height to auto' trick):

infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner');
TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}}); //TW is Tweenlite
window.addEventListener('resize', () => {
  TW.set(infoCss, {cssRule: {maxHeight: infoElm.clientHeight + 'px'}});
});

 

This is no big deal as I can of course just use GSAP to do the same animation instead, but still, I thought I'd mention it. As soon as I remove the above code, everything else works fine.

[GreenSock 8,117 Likes (Superhero)]

Ah, it looks like Microsoft browsers botch the placement of ":checked" when reading things via JS. Try this: 

 

infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner') || CSSRulePlugin.getRule(':checked#info-input ~ #info-inner');

 

Notice Microsoft shoves it to the start. 

[Acccent 358 Likes (Leader)]

Ah, microsoft browsers. They never fail to surprise me.

 

Thanks, and sorry about the late reply