Bug 207486 - Flex content alignment is displayed differently in Chromium-based browsers and Safari.
Summary: Flex content alignment is displayed differently in Chromium-based browsers an...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2020-02-10 11:09 PST by Boris Pallares
Modified: 2022-08-29 03:54 PDT (History)
8 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Boris Pallares 2020-02-10 11:09:00 PST 
Browsers where the Issue has been tested:

Safari: 13.0.5
Chrome: 80.0.3987.87
Firefox 72.0.2

What steps will reproduce the problem?
1. Go to https://codepen.io/bpallares/pen/MWwwmJW In both Chrome or Firefox, and Safari
2. Notice how Safari displays the whole content as full width and Chrome doesn't

What is the expected result?

All browsers should match the same styling.


What happens instead?

Safari and Chrome displays different widths. 

https://i.imgur.com/N9PAWlp.png - Chrome, Firefox
https://i.imgur.com/r3oXXno.png - Safari
Comment 1 Radar WebKit Bug Importer 2020-02-11 14:25:42 PST 
<rdar://problem/59363763>
Comment 2 Ahmad Saleem 2022-08-29 03:54:38 PDT 
I am unable to reproduce this issue in Safari Technology Preview 152 and Safari 15.6.1 using CodePen from Comment 0 and it is showing same as other browsers (Chrome Canary 107 and Firefox Nightly 106), matching intended reference screenshot.

I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Please reopen if you think this is still an issue. Thanks!