Bug 150796
| Summary: | Using -apple-system for font-family creates unneeded white-space in inline-flex/inline-block | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ben Frain <contact> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Major | CC: | bfulgham, mmaxfield |
| Priority: | P2 | ||
| Version: | Safari 9 | ||
| Hardware: | Mac | ||
| OS: | OS X 10.10 | ||
Ben Frain
It is possible that this issue is related to this: https://bugs.webkit.org/show_bug.cgi?id=147845
Here is a reduction. Only tested this on Yosemite/Safari 9. Click the button to toggle -apple-system being applied in the body font stack.
http://codepen.io/benfrain/pen/YyjwZp
Basically, if you have a wrapping element with font-size: 0 and line-height: 0 set and any number of elements set to be inline-block there should be no white-space rendered between those blocks. However, when using -apple-system in the font-family property, white-space is rendered regardless.
This can be problematic for layouts that rely on this technique to produce columns (sane problem with inline-flex too).
Are there any known workarounds CSS wise? I realise that whitespace could be removed in the DOM but in case users don't have the ability to remove the whitespace from the DOM are there any alternatives?
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Brent Fulgham
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.