Bug 194342 – MaterialUI TextField + Dialog + resized Safari window results in DOM elements hiding when they shouldn't

• Component: Compositing
• Status: NEW

I opened a ticket for this over at Material UI's GitHub page here (including screen captures of the problem):

https://github.com/mui-org/material-ui/issues/14411

...and produced a Codesandbox here:

https://8222owpkq9.codesandbox.io

The problem is that when Material UI TextField (React) components are within a Material UI Dialog component, when the browser is shrunk vertically, elements that are *not* TextField components (e.g. just generic divs or whatever) are partially or entirely obscured by...something. Looking at the web inspector, at the moment when the items disappear, I don't see any updates to the inspector indicating CSS or DOM elements have been added or removed. It might well be some sort of z-index issue, but I can't pin it down. It does not appear to be the case that the disappearing items move to the left or right

The Material UI maintainers weren't willing or able to help, in part because this problem is not replicable all of the time. In limited testing in my office, we reproduced it on about 75% of machines running Safari. Of course the Material UI maintainers were not able to reproduce it, so they couldn't track it down.

I think this is a relatively recent issue, because it's prominent enough, and enough of my team uses Safari in development, that I think we would have noticed it before now.

Thanks in advance!

[Simon Fraser (smfr)]

I can't reproduce. Can you attach a screenshot of the broken appearance?

Created attachment 361610 [details]
interlaced divs disappearing

Created attachment 361611 [details]
single div above Material-UI TextField components disappearing

Thanks for the reply! It's a bummer you guys can't reproduce. The MaterialUI guys couldn't either, but I'm not imagining things. I've seen this behavior on 3 different machines now (the one I'm currently using is Version 12.0.3 (13606.4.5.3.1)). 

I have absolutely no idea why it's exhibiting this behavior for me, but not you or the MaterialUI people. Frustrating, obviously. None of the Safari instances have extensions. I'd be happy to send over a full list of settings/config for my instance of Safari, but I don't know how to get a dump of that.

[Simon Fraser (smfr)]

I can reproduce now. This looks like a compositing bug.

To work around it, put z-index:0 on <div class="MuiPaper-root-19 MuiPaper-elevation24-45 MuiPaper-rounded-20 MuiDialog-paper-5 MuiDialog-paperScrollPaper-6">

[Radar WebKit Bug Importer]

<rdar://problem/47946563>

[Simon Fraser (smfr)]

Created attachment 361624 [details]
Standalone testcase

Thank you for your investigation and your replies. The "standalone test case" still breaks for me--I'm assuming that is as designed, correct?

When you say this is a "composition bug", is that a bug with Material-UI's code, or with the Safari rendering engine? I ask because this bug appears to be unique to Safari (it doesn't break in Chrome, which has the most similar rendering engine).

I'm happy to circle back with the Material-UI team with your findings, but I want to be clear about what I'm saying.

Thanks again!!

[Simon Fraser (smfr)]

It's a WebKit bug.

Okay, great! Thanks! 

What's the timeline for something like this to get fixed and find its way into a production build of Safari? Just trying to set my own expectations.