Dialog on mobile width has double scrollbar sections

kevinlee11 commented 2 years ago

Bug description

If you have a dialog open in a mobile width scenario (i.e. where it appears full width at the bottom) it ends up displaying double scrollbar sections.

Reproduction

Open a dialog in a browser that has mobile width.

Environment

System:
    OS: macOS 11.6.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.80 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
  npmPackages:
    @square/maker: ^7.0.0 => 7.0.0 
    vue: ^2.6.14 => 2.6.14 
    webpack: ^5.37.0 => 5.38.1

Addressed by

No response

Can you contribute a fix?

[ ] I’m interested in opening a pull request for this issue.

pretzelhammer commented 2 years ago

Hmm, I feel like something might have changed with how Chrome handles overflow: scroll; recently because I'm seeing this bug even back in Maker v4.3.0 when the Dialog component was first released and there's no way we would have released it with such an obvious bug.

pretzelhammer commented 2 years ago

oof, the bug has even backported itself all the way to Maker v2.0.1 to the Modal component and back to Maker v2.1.0 to the Blade component

landondurnan commented 2 years ago

I'm having trouble replicating the issue myself. Which browsers does this happen in and does it require different OS settings for scrollbar behavior?

pretzelhammer commented 2 years ago

@landondurnan i've been using macOS 11.6.4 with Chrome 98 and can reproduce consistently.

pretzelhammer commented 2 years ago

pr merged

square / maker