1520078 - Page elements overlapping

Status: RESOLVED FIXED

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

Description

[daviewales]

Attachment: Overlapping elements in Firefox.png

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.)

Comment 1

[daviewales]

Attachment: Elements not overlapping in Chrome.png

Comment 2

[Alice0775 White]

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.

Comment 3

[Alice0775 White]

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

Comment 4

[Jonathan Watt [:jwatt]]

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.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 6

[Jonathan Watt [:jwatt]]

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?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Sure, sounds good.

Comment 8

[Karl Dubost💡 :karlcow]

@-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.

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 10

[Oana Arbuzov [:oanaarbuzov]]

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?

Comment 11

[daviewales]

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