mui / mui/material-ui

Fullscreen Dialog sizing issue on Firefox Mobile

Open
#28,210 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

scope: dialog type: bug
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:

  1. Use Firefox Mobile
  2. Open the Full-Screen Dialog example at https://material-ui.com/components/dialogs/
  3. If the URL bar is hidden, the dialog will not fill the entire screen.
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.