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

(8 留言) (0 反應) (0 負責人)JavaScript (7,000 star) (434 fork)batch import

bugcomplexity:moderatehelp wanted

描述

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

貢獻者指南

技術棧: javascriptreact
領域: frontend
議題類型: bug
難度: 3
預計時間: 1-2 days
活動狀態: active
清晰度: clear
前置要求: JSS fundamentalsReact component lifecycleCSS transitionsBrowser reflow
新手友善度: 60
研究方向: 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.