Invariant Violation Maximum update depth exceeded on TextareaAutosize with Meiryo font in Firefox

[hatanaka-akihiro]

Current Behavior 😯

This bug is similar with #16685.
With the specific font (Meiryo font), bug has not been fixed.

Firefox (69) NG
Chrome (76) OK.

Steps to Reproduce 🕹

https://codesandbox.io/s/create-react-app-c69fh

Your Environment 🌎

Tech	Version
Material-UI	v4.4.1
React	v16.9.0
Firefox	v69
Chrome	v76

[hatanaka-akihiro]

It seems that the bug occuring conditions are limited.

• TextField contained with ExpansionPanel and ExpansionPanelDetails -> not occured.
• TextField contained with Dialog and DialogContent -> occured.

[bitoverflow]

Investigation an issue related to this.
Resolved by removing the 'rows' attribute from TextField

[oliviertassinari]

Could you confirm that this diff solves the problem?

diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
index 6634f0e6b2..6ac6e9742e 100644
--- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
@@ -21,6 +21,8 @@ const styles = {
     height: 0,
     top: 0,
     left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: 'translateZ(0)',
   },
 };

I could reproduce the problem on Firefox v69 with a zoom of 133%. Otherwise, removing the possibility for an infinite rendering loop, as proposed in this comment #16685 (comment) sounds good to me too.

[hatanaka-akihiro]

@oliviertassinari

I tried this diff.
I confirmed the bug was not occurred.
'translateZ()' CSS function will fix the bug.

[oliviertassinari]

Nice, do you want to submit a pull request?

@bitoverflow would it solve your issue too?

[hatanaka-akihiro]

@oliviertassinari

I think it is better that material-ui library includes this bug fix.

[oliviertassinari]

@hatanaka-akihiro agree, do you want to make it happen?

[hatanaka-akihiro]

@oliviertassinari Yes.

[bitoverflow]

@oliviertassinari

The patch did not solve it for us, but are starting to see a pattern on what is triggering it

• The screen needs to have a wide resolution
• The width of the browser window needs to have an odd number (over 1050px)

..strange things

[oliviertassinari]

@bitoverflow Thanks, in this case, I think that we can also remove the infinite loop potential with #16685 (comment). I'm tired of seeing this class of issue report. It seems that layout text measurement is instable, we can accept it and move on.

[joziahg]

A user of mine is also having this issue, they are on Firefox 69, newish macbook air.
Setting zoom to 80% stops it from crashing and having the console open stops if from crashing. Will keep troubleshooting to see what else is a factor.
I am also on Firefox 69, windows 10 and am not having this issue.

[bitoverflow]

Are now also seeing this in Internet Explorer 11.
Triggered a little different.

TextField with multiline, rows 3, inside a Dialog. Crashes when user fills the area with text and it needs to grow.

Stabilize by removing the rows parameter

[oliviertassinari]

Does somebody want to work on the problem and submit a pull request?

[bitoverflow]

I am still seeing this in 4.5.0 with IE11
rows=3. Crashes with Maximum update depth exceeded when typing the TexField full
Sandbox are not loading in IE11, så are not able to give an example

[oliviertassinari]

Solving IE 11 wasn't an expectation of the issue nor the pull request.

[oliviertassinari]

@bitoverflow If you have a reproduction (the sources maybe?), we would appreciate it. This issue was about Firefox.

[bitoverflow]

@oliviertassinari Created a new issue #17672 with demo