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?
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.