[Grid] Fixing iOS Safari negative margins

[YuichiOnodera]

Close #17142

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 067e324

[eps1lon]

@YuichiOnodera Could you update the tests in https://github.com/mui-org/material-ui/blob/79e80738e5c67f2e80af4a5dbe56e6ae47fb62ad/packages%2Fmaterial-ui%2Fsrc%2FGrid%2FGrid.test.js#L99-L108 to reflect the new values?

[eps1lon]

Looks like this causes visual regressions: https://www.argos-ci.com/mui-org/material-ui/builds/6090

Was this supposed to be a breaking change?

[oliviertassinari]

The visual regression changes seem specific to the isolated env we use to take the screenshot. I couldn't spot changes in the documentation. Happy to give it a try. It would be great to have a second 👀 in the review.

[eps1lon]

But let's figure this out before we merge. Just because it looks ok for you, doesn't mean the change is safe.

[oliviertassinari]

@eps1lon This would be great to double-check.

[eps1lon]

But let's figure this out before we merge. Just because it looks ok for you, doesn't mean the change is safe.

I haven't looked at it specifically but it sounds like that the change is not detectable in the docs due to

We apply box-sizing: content-box; in the visual regression tests and box-sizing: border-box; in the documentation to spot the few lines of CSS that aren't invariant.

-- #23934 (comment)

So this is might be a breaking change if you're using box-sizing: content-box. Considering the Grid is such a fundamental part of Material-UI and responsible for the layout we should reconsider this fix. As far as I know we don't document that we only support certain box-sizing models.

[oliviertassinari]

So this is might be a breaking change if you're using box-sizing: content-box.

@eps1lon Oh smart, I didn't consider this option. it can be tested in the docs by changing the box-sizing back & forth.

I see no changes on my end but please double check :).

[YuichiOnodera]

Not sure, but looks like a browser bug (Chrome, Safari). When we use margin: -32px; on a container, the width of the container is reduced by 64px, and that's okay. But when we change to margin: calc(0% - 32px), the width of the container doesn't shrink.

[oliviertassinari]

@YuichiOnodera Yeah, you are right. I move one of the visual screenshots to codesandbox:

• HEAD: https://codesandbox.io/s/centeredgrid-material-demo-forked-q6y0r?file=/demo.tsx

• PR: https://codesandbox.io/s/centeredgrid-material-demo-forked-boy6x?file=/demo.js

Developers would no longer get the correct width & placement.