Closed Bug 1559917 Opened 2 years ago Closed 2 years ago

[Linkedin] Overlapped content inside the login page

Categories

(Core :: Layout: Flexbox, defect, P1)

defect

Tracking

()

RESOLVED DUPLICATE of bug 1092007
Tracking Status
firefox-esr60 --- wontfix
firefox67 --- wontfix
firefox68 --- wontfix
firefox69 --- fix-optional

People

(Reporter: Anca, Unassigned)

References

()

Details

Attachments

(4 files)

Attached image linkedin.png

[Affected versions]:

  • 60.7.1esr
  • 67.0.3
  • 68.0b11
  • 69.0a1 (2019-06-18)

[Affected platforms]:

  • Windows 10 x64
  • macOS 10.14
  • Ubuntu 18.04 x64

[Steps to reproduce]:

Preconditions:

  • Make sure the browser is not in fullscreen
  1. Go to https://www.linkedin.com/
  2. Scroll down the login page to the middle of it
  3. Observe the UI

[Expected result]:

  • The content is arranged properly according to the window size.

[Actual result]:

  • The content is overlapped.

[Regression range]:

  • Not a regression, reproducible also on Fx 31.0a1 (2014-04-05).

[Additional Notes]:

  • On Chrome this issue is not reproducible.
  • I don't see any other overlapping issue when navigating the site, after login.
Attached image linkedin_screenshot.png

Hi Anca, I'm UTR on either 68 or 69 Nightly on Mac OS 10.14. Looks identical in Chrome. Maybe there was some transient CSS error on LinkedIn's side? Do you still see this?

Flags: needinfo?(anca.soncutean)

Hi Anca, I'm UTR on either 68 or 69 Nightly on Mac OS 10.14. Looks identical in Chrome. Maybe there was some transient CSS error on LinkedIn's side? Do you still see this?

I can still see this issue on macOS 10.14/ Windows 10 x64 with Firefox 69.0a1 (2019-06-30). Here is a MacBook Pro screenshoot Firefox vs Chrome: https://drive.google.com/file/d/1JGrvHfdQhMenBeD_nWSH8d91ONRTGvms/view?usp=sharing . Issue is reproducible only with the width bellow 1160px.

Flags: needinfo?(anca.soncutean)

The priority flag is not set for this bug.
:dbaron, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(dbaron)

Linkedin's homepage (when logged out) has media queries for three different screen widths:

  1. styles for up to 769px
  2. styles for 769px to 1161px
  3. styles for larger widths

This overlap shows up with (1) or (2) but not (3).

(It's also a little disturbing that both (1) and (2) apply when the window width is exactly 769px -- and interesting that in that case the overlap does not happen.)

So, basically, the overlap shows up when the viewport width is 1161px or smaller, as long as it's not exactly 769px.

(The overlap is not present in Chrome when either the (1) styles or the (2) styles are used alone, except it is present when both are used because the viewport width is exactly 769px!)

Given how major a site this is, I think this is a P1 at least to diagnose; we may try to resolve it by reaching out rather than by code change.

Flags: needinfo?(dbaron)
Priority: -- → P1

I can take a look at this if you want/don't have the cycles David, just lmk.

I wasn't planning investigate further, at least not immediately, so if you want to that would be great.

Flags: needinfo?(emilio)
Flags: needinfo?(dholbert)

Yes, it sounds like it.

Flags: needinfo?(emilio)

(In reply to David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 from comment #9)

Is this the same as https://github.com/webcompat/web-bugs/issues/30754 ?

(Note that in web-bug 30754 dholbert suggested it's an instance of Bug 1092007: https://github.com/webcompat/web-bugs/issues/30754#issuecomment-490694564)

Flags: needinfo?(dholbert)

(sorry, didn't mean to clear daniel's ni?, in case he wants to disagree)

Flags: needinfo?(dholbert)

(In reply to David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 from comment #9)

Is this the same as https://github.com/webcompat/web-bugs/issues/30754 ?

(yeah, I think it is.)

Flags: needinfo?(dholbert)
Depends on: 1092007
Component: Layout → Layout: Flexbox

I've confirmed that Bug 1092007 was indeed the underlying issue here, and it's now fixed in Nightly. Here's a screenshot of dbaron's partially-simplified-testcase, viewed side by side in Firefox 68.0.2 (overlapping content) vs. in Nightly (no overlap).

Per https://github.com/webcompat/web-bugs/issues/30754#issuecomment-520489948 , LinkedIn was kind enough to change their markup to work around this issue, so this should no longer be reproducible on the live site even in the current release of Firefox. But the testcase allowed me to double check that we have now actually fixed the underlying original issue on our end (in Nightly), too.

Status: NEW → RESOLVED
Closed: 2 years ago
No longer depends on: 1092007
Resolution: --- → DUPLICATE
Duplicate of bug: 1092007
You need to log in before you can comment on or make changes to this bug.