Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE11 getComputedStyle does not report custom properties correctly #2

Open
kaiyote opened this issue Sep 29, 2020 · 3 comments
Open

IE11 getComputedStyle does not report custom properties correctly #2

kaiyote opened this issue Sep 29, 2020 · 3 comments

Comments

@kaiyote
Copy link
Contributor

kaiyote commented Sep 29, 2020

This library uses window.getComputedStyle(document.documentElement).getPropertyValue('--custom-prop') to find the value to replace the var(--custom-prop) with.

Unfortunately, this doesn't work in IE11 (as I just found out). So we fixed the plugin running in IE11 with #1, but unfortunately it still can't figure out the correct value. It does grab the fallback value in the form of var(--prop, fallback) correctly. It just cannot find the real value.

I know that css-vars-ponyfill has its own css parser, which is how it gets around IE11's limitation. Unless I'm doing something wrong (a definite possibility), this is gonna be an issue.....

Minimal demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>IE computedStyle test</title>
  <style>
    :root {
      --test: red;
    }
  </style>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      let computed = getComputedStyle(document.documentElement).getPropertyValue('--test')
      console.log('value of `--test`: "' + computed +  '"')
    })
  </script>
</body>
</html>

Chrome Output: value of '--test': " red"
IE11 Output: value of '--test': ""
@ItsJonQ
Copy link
Owner

ItsJonQ commented Oct 4, 2020

Oh, that’s a good point. Will need to think about (auto) absorbing root values for IE11 (in a performant manner) 🤔

@ItsJonQ
Copy link
Owner

ItsJonQ commented Oct 5, 2020

Did a quick test with this library:
https://github.com/nuxodin/ie11CustomProperties

It looks like it's able to provide IE11 with the ability to set and read getPropertyValue() using the window.getComputedStyle() API.

Screen Shot 2020-10-05 at 7 03 53 AM

For the purposes of this plugin, that's all we really need 🙏

Unsure how performant and viable this solution is though

@kaiyote
Copy link
Contributor Author

kaiyote commented Oct 5, 2020

The theory looks sound, but I can see one major issue (sort of unavoidable, tho) that technically the css-vars-ponyfill also suffers from. It needs to re-download the entire stylesheet from a link[rel="stylesheet"] when it finds one, just to figure out if it has vars, and then rewrite it in memory and replace the original. Which I know from experience can introduce some serious load-time performance hits

I've used css-vars-ponyfill and was able to get around it because the only things using var in my scenario were dynamically generating the css (much like stylis/styled-components/et-al) and injecting them in style tags, and you could force it to ignore links. (but it was still parsing the css out from said links to find the values for the vars to inject into the styles)

css-vars also works by just parsing the css and adding new rules to places it finds vars in with the computed value of the var it found, where as ie11customProperties looks to be parsing the css, creating new vars that apparently work in ie11 (single leading -), and then also rewriting rules to use those......

This was referenced Nov 5, 2020
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ItsJonQ @kaiyote