cssinjs/jss

[react-jss] Sometimes `<style>` is injected after first render — which makes CSS transitions fire immediately

Open

#1324 opened on Apr 1, 2020

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bugcomplexity:moderatehelp wanted

Description

Describe the bug: I have encountered this bug in production and tried to reduce the example as much as possible. Under certain conditions CSS transitions get triggered when page loads.

See Codesandbox link. When the page loads, you can see red text appearing on the page which shouldn't be there.

As far as I understand the issue, <style> element gets injected after the component renders and not before — I tried console-logging the <style> element and it is indeed not there when the functional component (Styled) get called the first time.

This does not affect the app behavior unless a reflow is triggered. Upon reflow, the browser apparently "remembers" the default style values (in my case opacity: 1) and then applies transitions once JSS's <style> is injected. I my example, I added a call to getComputedStyle (which triggers reflow) and put it in componentDidUpdate method of a class component, which is rendered but outputs nothing. For some reason I was unable to reproduce this using hooks.

The bug was introduced in 10.0.0. Downgrading to 9.8.7 resolves the issue.

Codesandbox link: https://codesandbox.io/s/jolly-booth-82tke

Versions (please complete the following information):

  • jss: 10.1.1
  • Browser [e.g. chrome, safari]: Chrome 80, Firefox 74, Edge 18
  • OS [e.g. Windows, macOS]: Windows

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JSS fundamentalsReact component lifecycleCSS transitionsBrowser reflow
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate when JSS injects style elements relative to React component render. Look at the react jss bindings, specifically the `createHOC` or `injectSheet` functions. Examine the CodeSandbox provided to reproduce the issue. Focus on the difference between v9 and v10 in how styles are injected.