search

jhildenbiddle / css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
https://jhildenbiddle.github.io/css-vars-ponyfill
MIT License
1.46k stars 64 forks source link

Styles removed completely in IE11 on 3rd call to cssVars #149

Closed muster-mark closed 3 years ago

muster-mark commented 3 years ago

Not sure if this is a duplicate of https://github.com/jhildenbiddle/css-vars-ponyfill/issues/148 or not

I am having issues in IE11, whereby multiple callls to cssVars cause the styles to be removed completely - logging cssText in the onComplete callback shows that cssText is an empty string.

The problem only occurs in IE11. It works fine in Firefox and Chrome (and yes I have set onlyLegacy to false).

I have noticed that after calling cssVars the first time, the link I am targeting has disabled="" in IE11, but not in the modern browsers. Not sure if that is the cause of the problem or not.

It is on the third call to cssVars that the cssText is empty.

jhildenbiddle commented 3 years ago

@muster-mark --

Have styles been removed from the DOM or are you just referring to the cssText value from onComplete() being empty? The former would definitely be a bug while the latter could be the ponyfill behaving as designed (indicating the ponyfill was called but there was no work to do).

muster-mark commented 3 years ago

@jhildenbiddle The inline style element is not removed from the DOM, but the inline style elements contents are removed due to cssText being an empty string. By no work to do, presumably you mean no matching stylesheets? Update: Close was accidental

jhildenbiddle commented 3 years ago

Issue confirmed in 2.4.x using this demo: https://css-vars-ponyfill-149.glitch.me/

Initial testing shows only IE11 is affected (modern browsers with onlyLegacy:false work as expected). Must be related to to the following change in 2.4.0:

  • Fix skip behavior of <link> elements with disabled attribute

Thanks for filing the issue. I'll look into this as soon as possible.

JaxonWright commented 3 years ago

For now, downgrading to 2.3.2 works.

jhildenbiddle commented 3 years ago

Apologies for the delayed fix, folks. Holidays + switching to an M1-based Mac that doesn't play well with node-based projects have pushed back a quick fix. I'll do my best to get to it before EOW.

muster-mark commented 3 years ago

Hi @jhildenbiddle, when do you think you'll be able to get a fix for this pushed!

jhildenbiddle commented 3 years ago

Hey @muster-mark.

Apologies for the delay, @muster-mark. Getting node projects up and running on the new MacBook and family commitments have prevented me from taking care of this sooner. I'll do my best to have this issue addressed before EOW.

Thanks for your patience!

jhildenbiddle commented 3 years ago

@muster-mark, @JaxonWright --

Fixed in 2.4.3.

This update also properly handles (i.e., ignores) stylesheets disabled by the user via JS (by setting sheet.disabled to true) or a disabled attribute on a <link> tag.

Thanks again for your patience on this one.