firebaseui-dialog too tall on chrome

[sumarlidason]

[REQUIRED] Describe your environment

  "firebase": "^8.2.4",
  "firebaseui": "^4.7.1",

  System:
    OS: macOS 11.1
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.2

[REQUIRED] Describe the problem

firebaseui dialog grows after sign-on success

Steps to reproduce:

complete sign-on w/ link, enter email address to continue (don't press enter), over mouse over script debug "pause execution button", press enter and rapidly click pause button.

Open inspector to view DOM.

Relevant Code:

firebaseui-web/stylesheet/firebase-ui.css

Lines 375 to 377 in 540ddc0

	/* If we do not set height here, the default Safari dialog settings make the
	* dialog too tall. */
	height: auto;

My interim fix

dialog.mdl-dialog.firebaseui-dialog.firebaseui-id-dialog {
  height: fit-content !important;
}

I haven't seen any side effects from overriding the height yet ~ but considering the comment already existing there ~ maybe implications elsewhere.

[sam-gc]

Hi, thanks for reaching out. Does it work if you set a max height on the element that contains Firebase UI in your app?

[sumarlidason]

The dialog mounts to the DOM root, and its style is manually calculated:

adding bottom: 'auto' also prevents the downward shift ~

🤷

[bojeil-google]

I looked into this issue. I tried it out in various browsers and Chrome v87 and it works as expected. This issue seems to manifest in Chrome v88. I speculate it is a bug in the latest version of Chrome. We have a potential fix for it.

[bojeil-google]

This should be fixed in the latest FirebaseUI-web release.

[orzcode]

This either isn't fixed, or the 'fix' seems to have developed a bug of its own.

In the latest version of Chrome as of today, this same dialog appears (for me) suddenly way over to the left of the screen, with seemingly random absolute position numbers:

I'm unable to tame this beast as it appears as a dialog overlaid on top of the rest of the page, so doesn't respect the flexbox rules in the place it 'should' be appearing (I.E: in the firebase auth div container like a regular Google Sign-in does)