IE11 bug with media queries and dynamic props
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
@robineng commented on [Fri Oct 13 2017](https://github.com/cssinjs/react-jss/issues/165)
Consider this code
```js
backgroundColor: ({ toggled }) => toggled ? 'green' : 'blue',
'@media only screen and (min-width: 500px)': {
backgroundColor: ({ toggled }) => toggled ? 'red' : 'white'
}
```
Chrome

IE11

Reproducible on all react-jss@7.{0,1,2}.x
minimal reproducible demo of the bug is here https://github.com/robineng/react-jss-ie11-media-bug
webpackbin demo is here https://www.webpackbin.com/bins/-KwK_wNiweqW7v1BHxof, but webpackbin doesnt work in IE11 =(
/cc @iamstarkov (have seen this bug with his own eyes)
---
@kof commented on [Fri Oct 13 2017](https://github.com/cssinjs/react-jss/issues/165#issuecomment-336471916)
looks like a bug, thanks for a report, if you have time, feel free to dig into code, it will take some time until I am able to work on this.
---
@rob2d commented on [Thu Oct 19 2017](https://github.com/cssinjs/react-jss/issues/165#issuecomment-337773070)
Just a note: this also seems to affect the latest Chrome as well .
---
@rob2d commented on [Thu Oct 19 2017](https://github.com/cssinjs/react-jss/issues/165#issuecomment-337773689)
As a workaround for now if nobody has time to look into things: adding a prop to observe window dimensions (I usually go with `viewportWidth` and `viewportHeight` personally) will allow you to simulate the same behavior with minimal overhead in React. This is especially convenient to do in Redux as we only need to observe in one place.
---
@kof commented on [Fri Oct 20 2017](https://github.com/cssinjs/react-jss/issues/165#issuecomment-338216541)
It is actually not related to media, but any jss-nested rules, which use function values on the same properties.
---
@kof commented on [Sun Nov 12 2017](https://github.com/cssinjs/react-jss/issues/165#issuecomment-343732492)
Ported your example to codeandbox https://codesandbox.io/s/72kw8lo540 It allows to just copy the demo itself and it opens up in IE, so I can see the bug now.
Contributor guide
Assessment
This issue has not been assessed yet.