Fullscreen Dialog sizing issue on Firefox Mobile
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- 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 😯
When opening a full screen Dialog in Firefox Mobile, the dialog does not expand into the space at the bottom when the URL bar becomes hidden.
Expected Behavior 🤔
The fullscreen dialog takes up the whole screen.
Steps to Reproduce 🕹
Steps:
- Use Firefox Mobile
- Open the Full-Screen Dialog example at https://material-ui.com/components/dialogs/
- If the URL bar is hidden, the dialog will not fill the entire screen.
- Try to scroll on the page to get the URL bar to show up again, notice that the dialog resizes.
Context 🔦
Just trying to use a full screen dialog for mobile devices is all. This is particularly a problem if there is a button at the bottom in a DialogActions, because the cut-off area will hide the buttons and it isn't immediately obvious that there's something hidden until the user jiggles the page and the issue fixes itself.
There's a chance this is not a material-ui bug, but a Firefox bug, but it's hard for me to debug it because the Firefox debugging tools for mobile are not as good.
Your Environment 🌎
`npx @mui/envinfo`
System:
OS: Linux 5.13 Fedora 34 (KDE Plasma) 34 (KDE Plasma)
CPU: (8) x64 AMD Ryzen 5 1500X Quad-Core Processor
Memory: 7.59 GB / 15.55 GB
Container: Yes
Shell: 5.1.0 - /bin/bash
Binaries:
Node: 14.17.0 - /usr/bin/node
npm: 6.14.13 - /usr/bin/npm
Managers:
Cargo: 1.54.0 - /usr/bin/cargo
Maven: 3.6.3 - /usr/bin/mvn
pip3: 21.2.4 - ~/.local/bin/pip3
RubyGems: 3.2.22 - /usr/bin/gem
Yum: 4.8.0 - /usr/bin/yum
Utilities:
Make: 4.3 - /usr/bin/make
GCC: 11.2.1 - /usr/bin/gcc
Git: 2.31.1 - /usr/bin/git
FFmpeg: 4.4 - /usr/bin/ffmpeg
Virtualization:
Docker: 20.10.8 - /usr/bin/docker
VirtualBox: 6.1.26 - /usr/bin/vboxmanage
IDEs:
Nano: 5.8 - /usr/bin/nano
Vim: 8.2 - /usr/bin/vim
Languages:
Bash: 5.1.0 - /usr/bin/bash
Java: 11.0.12 - /usr/bin/javac
Perl: 5.32.1 - /usr/bin/perl
Python: 3.9.6 - /usr/bin/python
Python3: 3.9.6 - /usr/bin/python3
Ruby: 3.0.2 - /usr/bin/ruby
Rust: 1.54.0 - /usr/bin/rustc
Databases:
MySQL: 10.5.11 (MariaDB) - /usr/bin/mysql
SQLite: 3.34.1 - /usr/bin/sqlite3
Browsers:
Chrome: 93.0.4577.63
Firefox: 91.0.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Full-Screen Dialog example at https://material-ui.com/components/dialogs/ and reproduce the behavior in Firefox Mobile while the URL bar hides and reappears. Check how the Dialog and DialogActions occupy the viewport, and verify that the dialog expands to the full screen without hiding bottom actions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100