Bug 169700 - CSS align-items and justify-content are ignored when flex container is a button element
Summary: CSS align-items and justify-content are ignored when flex container is a butt...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-03-15 15:22 PDT by Phil
Modified: 2017-12-05 23:54 PST (History)
9 users (show)

See Also:

Test Case (869 bytes, text/html)
2017-03-15 15:22 PDT, Phil
no flags Details
Test run on safari 11 (166.72 KB, image/png)
2017-09-19 19:22 PDT, Zhifei Fang
no flags Details
Screenshot of actual output of Safari 8 (14.25 KB, image/png)
2017-12-05 04:06 PST, Oliver Joseph Ash
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Phil 2017-03-15 15:22:47 PDT
Created attachment 304560 [details]
Test Case

See attached test case.  

The align-items and justify-content properties seems to be completely ignored when the flex container is a button.  It doesn't seem to matter if the flex direction is row or column, or what value you use for align-items and justify-content - setting them does not affect any change whatsoever.

Works as expected in Chrome, Firefox, IE11, and Edge.  Fails only in Safari
Comment 1 Radar WebKit Bug Importer 2017-03-15 19:24:06 PDT
Comment 2 Zhifei Fang 2017-09-19 19:18:21 PDT
Looks fine on Safari Version 11.0 (12604.
Comment 3 Zhifei Fang 2017-09-19 19:22:40 PDT
Created attachment 321277 [details]
Test run on safari 11
Comment 4 Oliver Joseph Ash 2017-12-05 04:06:42 PST
Created attachment 328444 [details]
Screenshot of actual output of Safari 8

Note the attached test case image is wrong. It shows the expected output instead of the actual output. I have attached a corrected screenshot of the actual output on Safari 8.

This does appear to be fixed in Safari 11.
Comment 5 Jon Lee 2017-12-05 23:54:35 PST
Thanks for the confirmation.