Page MenuHomePhabricator

Banner faces skewed left on Safari
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

  1. Open https://en.wikipedia.org/wiki/NASA?banner=sp_trilogy_dsk_p1_lg_template_madebyyou7_CBupdates_20201218&force=1&country=GB on a Safari browser
  2. Observe banner faces are skewed left (see screenshot)

image.png (168×300 px, 42 KB)

Actual Results:
Currently banner faces are skewed left on all versions of Safari browsers

Expected Results:
Banner faces should be centered in Safari as they are on other browsers

Notes:
Confirmed this issue is appearing on the following OS/Browsers
MacOS11.0/Safari 14
MacOS10.15/Safari 13
MacOS10.14/Safari 12
MacOS10.13/Safari 11
MacOS10.12/Safari 10
MacOS10.11/Safari 9

Related Objects

Event Timeline

EWilfong_WMF claimed this task.
EWilfong_WMF subscribed.

@jbolorinos-ctr - I believe this issue is resolved. I fixed by changing the display property of this element from table to flex (diff). This should be fine, but please do review the browser screenshots with this change to confirm.

Thanks so much for the quick fix @EWilfong_WMF, I'll run another screenshot test now to verify it looks good, and if so I'll go ahead and close this task

Ok looks great now!

Fix verified:

image.png (168×300 px, 39 KB)

Closing task now as Resolved, thanks again Eric!