Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[system] Settings both X and Y for overflow on Box does not work on Safari #17297

Closed
2 tasks done
Jak3b0 opened this issue Sep 3, 2019 · 4 comments · Fixed by #23053
Closed
2 tasks done

[system] Settings both X and Y for overflow on Box does not work on Safari #17297

Jak3b0 opened this issue Sep 3, 2019 · 4 comments · Fixed by #23053
Assignees
@mnajdova
Labels
component: Box The React component. new feature New feature or request package: system Specific to @mui/system

Comments

@Jak3b0
Copy link

Jak3b0 commented Sep 3, 2019

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Setting a value of hidden auto as the overflow on a Box component does not work on Safari. The attribute is not present in the rendered HTML.

This is working on Chrome and Firefox.

Expected Behavior 🤔

Safari does not seem to implement the shorthand overflow the same way Firefox and Chrome does. It allows me to set a single value (ie.: auto) and it will affect both axes.

Steps to Reproduce 🕹

https://codesandbox.io/embed/create-react-app-shfhh

Your Environment 🌎

Tech Version
Material-UI v4.3.3
React v16.8.6
Browser
TypeScript v3.5.3
etc.
@oliviertassinari
Copy link
Member

How is this an issue with Material-UI?

@Jak3b0
Copy link
Author

Jak3b0 commented Sep 3, 2019 •
edited
Loading

Because I am using the Box component from Material-UI and I am using the overflow property on it. The Box does not expose a overflowX and overflowY so it does not allow me to control the values independently for Safari.

@mbrookes mbrookes added the component: Box The React component. label Sep 3, 2019
@oliviertassinari oliviertassinari added the new feature New feature or request label Sep 3, 2019
@oliviertassinari
Copy link
Member

I'm surprised the syntax even work with Chrome and Firefox. I think that it's a feature request for more props.

@oliviertassinari oliviertassinari added the package: system Specific to @mui/system label Sep 4, 2019
@oliviertassinari
Copy link
Member

The latest version of Safari (14) supports it. We are adding a superset of CSS in #23053, it will close this issue.

@oliviertassinari oliviertassinari mentioned this issue Oct 20, 2020
Merged
2 tasks
@oliviertassinari oliviertassinari added waiting for 👍 Waiting for upvotes and removed waiting for 👍 Waiting for upvotes labels Oct 20, 2020
@oliviertassinari oliviertassinari changed the title [Box] Settings both X and Y for overflow on Box does not work on Safari [system] Settings both X and Y for overflow on Box does not work on Safari Oct 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mnajdova mnajdova

Labels
component: Box The React component. new feature New feature or request package: system Specific to @mui/system
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Box] Add sx prop mnajdova/material-ui
4 participants
@mbrookes @Jak3b0 @oliviertassinari @mnajdova