Jump to content


CSSRulePlugin not working in Edge/IE11?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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


Thanks, and sorry about the late reply :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.