Page elements overlapping

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

• Create fresh Firefox Profile.
• Load this page: https://redox.com/
• Scroll to the bottom

Actual results:

• The locations section overlaps the footer.

Expected results:

• The footer should be pushed down, so there is no overlap. (Works in Safari and Chrome.)

I can reproduce the issue on all version of release win10, but not on nightly build.

Fixed range, but this is only nightly build(and early beta):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=4ad2150e73c0b19f1f6264a4b9ad6927986d43ce&tochange=37e0bd919af057d44c5c1410458c0f00a3653c11

And the site uses @-moz-document rule. So, seems this is the site problem.

Workaround:
layout.css.moz-document.url-prefix-hack.enabled = false

Bug 1446470 introduced that pref because various sites broke when the code guarded by that pref is enabled. Interesting that this is a case where content breaks without it instead.

I guess Emilio may want to take a look.

This is unfortunate, but yeah, I bet fixing bug 1449753 will break more stuff than not... We could give that a try though, there's a long time since anybody has reported any other issue with that, and it's off-by-default on Nightly.

If this has been our behavior for a long time and there haven't been any other reported issues, do you want to move this to Tech Evangelism?

Sure, sounds good.

@-moz-document url-prefix() {
 .banner-small .banner.banner-half {
 padding-bottom: 156.3px;
 }
}

and

@-moz-document url-prefix() {
 main section:nth-of-type(odd) {
 clip-path: url("/styles/Paths.svg#rightSlope");
 margin-top: -156.3px;
 padding-top: 156.3px;
 padding-bottom: 156.3px;
 }
 main section:nth-of-type(even) {
 clip-path: url("/styles/Paths.svg#leftSlope");
 margin-top: -156.3px;
 padding-top: 156.3px;
 padding-bottom: 156.3px;
 }
 main section:nth-of-type(2) {
 clip-path: url("/styles/Paths.svg#leftSteepSlope");
 margin-top: -307.2px;
 padding-top: calc(1rem + 307.2px);
 padding-bottom: 156.3px;
 }
 main section:nth-of-type(1) {
 clip-path: none;
 margin-top: 0;
 padding-top: 0;
 padding-bottom: 0;
 }
 footer {
 clip-path: url("/styles/Paths.svg#leftSlope");
 margin-top: -156.3px;
 padding-top: 156.3px;
 padding-bottom: 0;
 }
}

Moving to needscontact.

See bug 1547409. Moving webcompat whiteboard tags to keywords.

This seems to be fixed, the layout has also changed and no elements are overlapping.
Location map: https://prnt.sc/JCkfuHJoYuuR
Page footer: https://prnt.sc/tRABctzMsPGl

Tested with:
Browser / Version: Firefox Nightly 103.0a1 (2022-06-05)
Operating System: Windows 10 Pro

daviewales can you still reproduce it?

The new version of the website doesn't have any issues.
The old version on internet archive still has the overlap:

https://web.archive.org/web/20190215011845/https://redox.com/

Tested with Nightly 103.0a1 on MacOS 10.13.6