Flexbug #12 (inline elements are not treated as flex-items) seems to have affected older versions of Safari as well. I'm not sure which exact versions, but I was able to reproduce the bug in Safari 8.0.8 (Yosemite), and confirm that the bug was no longer reproducible in Safari 9.1.2 (El Capitan).
I've searched this repo and the WebKit Bugzilla but couldn't find any mention of this issue, so I'm curious if anyone else knows more, or can also reproduce it.
Here's a screenshot of the flexbug 12 bug demo in Safari 8.0.8. -webkit-box-flex: 1 appears to have no affect on the inline elements. The three items should each have the same width:
Here's a screenshot of the flexbug 12 workaround demo in Safari 8.0.8. Adding display: block gets the inline flex items working:
Here's a screenshot of the flexbug 12 bug demo in Safari 9.1.2. The issue isn't reproducible in this version:
Flexbug #12 (inline elements are not treated as flex-items) seems to have affected older versions of Safari as well. I'm not sure which exact versions, but I was able to reproduce the bug in Safari 8.0.8 (Yosemite), and confirm that the bug was no longer reproducible in Safari 9.1.2 (El Capitan).
I've searched this repo and the WebKit Bugzilla but couldn't find any mention of this issue, so I'm curious if anyone else knows more, or can also reproduce it.
Here's a screenshot of the flexbug 12 bug demo in Safari 8.0.8.
-webkit-box-flex: 1appears to have no affect on the inline elements. The three items should each have the same width:Here's a screenshot of the flexbug 12 workaround demo in Safari 8.0.8. Adding
display: blockgets the inline flex items working:Here's a screenshot of the flexbug 12 bug demo in Safari 9.1.2. The issue isn't reproducible in this version: