Closed Bug 1879879 Opened 1 year ago Closed 2 months ago

The items from the ordered/unordered lists are misaligned on developers.pinterest.com

Categories

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

Product:
Web Compatibility
Component:
Site Reports
Version:
Firefox 124
Platform:
Desktop
Windows 10
Type:
defect

Tracking

(Webcompat Priority:P3, Webcompat Score:3, firefox122 affected, firefox124 affected)

Status:
RESOLVED FIXED
Project Flags:
Webcompat Priority P3
Webcompat Score 3
Tracking Flags:
Tracking Status
firefox122 --- affected
firefox124 --- affected

People

(Reporter: ctanase, Assigned: twisniewski)

References

(Depends on 1 open bug,
URL
)

Details

(Keywords: webcompat:platform-bug, webcompat:site-report, webcompat:sitepatch-applied)

User Story

platform:windows,mac,linux,android
impact:significant-visual
configuration:general
affects:all
branch:release
diagnosis-team:layout
user-impact-score:40

Attachments

(2 files)

lists Firefox vs Chrome.png
158.56 KB, image/png
Details
Bug 1879879 - add a CSS intervention for developers.pinterest.com/docs to fix list alignment; r=ksenia
48 bytes, text/x-phabricator-request
Details | Review

Environment:
Operating system: Windows 10
Firefox version: Nightly 124.0a1 (2024-02-11)

Steps to reproduce:

  1. Go to https://developers.pinterest.com/docs/add-ons/about-addons
  2. Scroll down the page.
  3. Observe the lists.

Expected Behaviour:
The items from the lists are aligned correctly.

Actual Behaviour:
The items from the lists are misaligned.

Notes:

  1. Screenshot attached
  2. Reproducible on Firefox Release as well
  3. Not reproducible on Chrome
  4. Issue found during WebCompat team [Top100] websites testing
Severity: -- → S3
Keywords: webcompat:needs-diagnosis, webcompat:needs-sitepatch
Priority: -- → P2
User Story: (updated)

Here's a reduced test-case:

data:text/html,<!DOCTYPE html><ul><li><span><div>Update your JavaScript

It looks like with the standards doctype, Firefox adds an extra line-break, padding, or some other space, while Chrome does not. It also seems related to the nested div in the span, as if I drop either of those tags, the space also goes way.

I'm unsure if there's a way to site-patch this, so I'll drop that keyword for now.

User Story: (updated)
Keywords: webcompat:needs-sitepatch → webcompat:site-report
Depends on: 1918740

I spun off bug 1918740 for the platform bug here.

Keywords: webcompat:needs-diagnosis → webcompat:platform-bug

Sitepatch could be something like :where(.MlF) { display: block; } or so.

Thanks Emilio! That does seem to work. We may also want to make it not rely on the specific class, in case the site updates, but that might be overkill (for instance li > span:has(>div) { display:block; })

Keywords: webcompat:needs-sitepatch
Assignee: nobody → twisniewski
Status: NEW → ASSIGNED
Keywords: leave-open
Pushed by twisniewski@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/01a9bbeb7fda add a CSS intervention for developers.pinterest.com/docs to fix list alignment; r=ksenia,webcompat-reviewers
See Also: → 1937841
Webcompat Priority: --- → P3
User Story: (updated)
Webcompat Score: --- → 3
Priority: P2 → P3

The issue is no longer there on the site, and so we just removed the intervention in bug 1937841.

Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: