cssinjs / cssinjs/jss

IE11 bug with media queries and dynamic props

Open
#623 0 comments 0 reactions 0 assignees View on GitHub
bug complexity:moderate
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
![ckxy9q4hee](https://user-images.githubusercontent.com/5429582/31550769-b8f02ac4-b032-11e7-8112-ccb5a42f9d71.gif)
IE11
![xfxpgyiddq](https://user-images.githubusercontent.com/5429582/31550802-d2daae64-b032-11e7-8c96-84886c3485a6.gif)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.