Bug 150796 – Using -apple-system for font-family creates unneeded white-space in inline-flex/inline-block

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[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?

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.