1947105 - www.pexels.com - "Say Thanks!" pop-up is not fully visible after downloading something

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Environment:
Operating system: Windows 11/10
Firefox version: Mozilla Firefox 134.0.2/135/137

Steps to reproduce:

1. Go to https://www.pexels.com/photo/stylish-woman-relaxing-outdoors-in-autumn-fashion-29946756/
2. Click on the "Free download" button.
3. Observe the pop-up window.

Expected Behavior:
The "Say Thanks!" pop-up is fully visible.

Actual Behavior:
The "Say Thanks!" pop-up is not fully visible.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/147794

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Alice0775 White]

FWIW, Unset the following css is a workaround.

.Modal_overlay__9VSuC.Modal_positionContentCenter__QzDur {
  justify-content: center;
}

Comment 4

[Dennis Schubert [:denschub]]

In Chrome, the popup thing is anchored on the top, so it'd be interesting to figure out the difference.

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1947105 - add a CSS intervention for pexels.com to ensure their thank-you popup is on-screen; r?denschub

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/757ea749d1c6
add a CSS intervention for pexels.com to ensure their thank-you popup is on-screen; r=denschub,webcompat-reviewers

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/757ea749d1c6

Comment 8

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1947105 - linting fix for our CSS intervention for pexels.com; r?denschub

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0e5bbc4fe9ef
linting fix for our CSS intervention for pexels.com; r=denschub,webcompat-reviewers

Comment 10

[Atila Butkovits]

Backed out for causing failures at browser_interventions.js.

Backout link: https://hg.mozilla.org/integration/autoland/rev/a5f31fde35ddbb02b23fc5aef0f9d4df2bd6214b

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=a821d37825967d3279c2a9e11d3d3ffecd757f7e&selectedTaskRun=LhyobKVkSDaYzxex9PeOBg.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=496740708&repo=autoland&lineNumber=11514

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/45c56395927b
linting fix for our CSS intervention for pexels.com; r=denschub,webcompat-reviewers

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e5b9e8372eb4
linting fix for our CSS intervention for pexels.com; r=denschub,webcompat-reviewers

Comment 13

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/e5b9e8372eb4

Comment 14

[Daniel Holbert [:dholbert]]

So the behavior-difference here is that the thing-being-centered (via the CSS in comment 3) is shorter in Chrome than it is in Firefox. It's not quite anchored to the top, but rather it's just sized to exactly fit the container (and hence doesn't need to be centered).

That happens via this CSS:

.Modal_scrollWrapper__uU5Er {
[...]
  max-height: 100vh;
  max-height: -webkit-fill-available;
  max-height: -moz-available;
  max-height: stretch;

Chrome sees -webkit-fill-available which makes this Just Work.

If we enable support for that property, you might think it'd work in Firefox too, but it doesn't -- max-height: -moz-available; comes after that and hence overrides it, and unfortunately max-height: -moz-available; behaves like max-height:none (for now, pending bug 527285, though I'm tentatively planning to fix that after shipping -webkit-fill-available)

When we ship support for the stretch sizing keyword, that'll get us the right behavior here too.

So: the platform bug that'll get this working here is either bug 527285 or bug 1789477 (either one will make this work).