157070 2016-04-27 07:14:03 -0700 Safari 9 flexbox align-content attribute incorrect behavior 2022-02-13 19:34:39 -0800 1 1 1 Unclassified WebKit CSS Safari 9 Mac OS X 10.11 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=209871 InRadar P2 Normal --- 1 alex.bea webkit-unassigned alex.bea bfulgham hyatt jonlee simon.fraser webkit-bug-importer oldest_to_newest 1187738 0 alex.bea 2016-04-27 07:14:03 -0700 This came up in a Stack Overflow question where flex container contents were floating center when `align-self: flex-end` was set on the child in Safari 9 (1). Turned out that it was align-content: center causing the problem. According to the align-content spec, there should be no effect on a single-line flex container (2). That seems to be the case in other browsers. So the bug is that align-content is having an effect when it shouldn't there. Example cleaned up from SO here for review: http://codepen.io/alexbea/pen/KzBXQJ (1) http://stackoverflow.com/questions/36770602/safari-9-flexbox-align-self-flex-end-doesnt-work (2) https://www.w3.org/TR/css-flexbox-1/#align-content-property 1260355 1 jonlee 2016-12-15 16:26:32 -0800 <rdar://problem/29695099> 1281800 2 hyatt 2017-02-28 10:45:57 -0800 The codepen is gone, so not sure how to test. 1281830 3 jonlee 2017-02-28 11:22:07 -0800 Move to INVALID due to insufficient info. 1282721 4 alex.bea 2017-03-02 07:36:26 -0800 I was doing some Codepen account cleanup and accidentally deleted it. I've reproduced it: https://codepen.io/alexbea/pen/RpaNQq 1636664 5 395204 alex.bea 2020-04-01 14:46:36 -0700 Created attachment 395204 Single file demo of the problem I'm attaching this demo in case the Codepen demo disappears again. 1841109 6 bfulgham 2022-02-13 19:34:39 -0800 I'm afraid I can't see any difference between Safari 15.4 (Beta) and Chrome on this test page. I suspect that this (along with a number of other flex bugs) have been fixed since this was originally filed. Could you please REOPEN if this is still an issue, and perhaps help me understand what I missed when I looked at the test case? 395204 2020-04-01 14:46:36 -0700 2020-04-01 14:46:36 -0700 Single file demo of the problem demo.html text/html 1266 alex.bea PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiBkaXI9Imx0ciI+CiAgPGhlYWQ+CiAgICA8 bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgICA8dGl0bGU+PC90aXRsZT4KICA8L2hlYWQ+CiAgPGJv ZHk+CiAgICA8c3R5bGUgbWVkaWE9InNjcmVlbiI+CiAgICAgIGJvZHkgeyBiYWNrZ3JvdW5kLWNv bG9yOiBncmF5OyB9CgogICAgICAucm93IHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAg IGZsZXgtd3JhcDogd3JhcDsKICAgICAgICBhbGlnbi1jb250ZW50OiBjZW50ZXI7CiAgICAgICAg YWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7CgogICAgICAgIC8qICBGb3IgY2xhcml0eSAgKi8KICAg ICAgICBoZWlnaHQ6IDQwMHB4OwogICAgICAgIG1heC13aWR0aDogNjAwcHg7CiAgICAgICAgYmFj a2dyb3VuZC1jb2xvcjogeWVsbG93OwogICAgICAgIG1hcmdpbi1sZWZ0OiBhdXRvOwogICAgICAg IG1hcmdpbi1yaWdodDogYXV0bzsKICAgICAgfQoKICAgICAgLmNvbnRlbnQgewogICAgICAgIGFs aWduLXNlbGY6IGZsZXgtZW5kOwoKICAgICAgICAvKiAgRm9yIGNsYXJpdHkgICovCiAgICAgICAg YmFja2dyb3VuZC1jb2xvcjogdmlvbGV0OwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPCEtLQog ICAgV2ViS2l0IEJ1Z3ppbGxhOiBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/ aWQ9MTU3MDcwCiAgICBTdGFja292ZXJmbG93OiBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1 ZXN0aW9ucy8zNjc3MDYwMi9zYWZhcmktOS1mbGV4Ym94LWFsaWduLXNlbGYtZmxleC1lbmQtZG9l c250LXdvcmsKICAgIC0tPgogICAgPGRpdiBjbGFzcz0icm93Ij4KICAgICAgPGRpdiBjbGFzcz0i Y29udGVudCI+CiAgICAgICAgPGgyPkhlYWRpbmcgZm9yIGFydGljbGU8L2gyPgogICAgICAgIDxw PgogICAgICAgICAgQWVuZWFuIGV1IGxlbyBxdWFtLiBQZWxsZW50ZXNxdWUgb3JuYXJlIHNlbSBs YWNpbmlhIHF1YW0gdmVuZW5hdGlzIHZlc3RpYnVsdW0uIEFlbmVhbiBsYWNpbmlhIGJpYmVuZHVt IG51bGxhIHNlZCBjb25zZWN0ZXR1ci4gRHVpcyBtb2xsaXMsIGVzdCBub24gY29tbW9kbyBsdWN0 dXMsIG5pc2kgZXJhdCBwb3J0dGl0b3IgbGlndWxhLCBlZ2V0IGxhY2luaWEgb2RpbyBzZW0gbmVj IGVsaXQuIE1hZWNlbmFzIHNlZCBkaWFtIGVnZXQgcmlzdXMgdmFyaXVzIGJsYW5kaXQgc2l0IGFt ZXQgbm9uIG1hZ25hLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2Jv ZHk+CjwvaHRtbD4K