TYPO3 Core

It is not only on the page-tree icons, but also on other icons.

The bug occurs only on Mac with retina displays and a second external (non retina) Monitor.
On the retina screen all is fine, on the external monitor the one pixel crop happens.

I figured out, that setting the line-height of .icon-size-small to 20px fix the problem.
Fixing this in general scope will force broken icons in other context like the Toolbar (Top-Menu-Bar).

Safari with line-height: 20px; for .icon-size-small

Safari 9.1.1 (11601.6.17) on 15' MACBOOK pro (2011, no retina display, 1440x900) - see attached file

The bug is still valid on 8.6.0-dev (master)

Looks like a bug in Safari stable, which I could reproduce in the Technology Preview Versions available in (El Capitan and Sierra)¶

After some research and CSS fixing the problem seems to be an upstream problem in Safari itself:

In latest stable Safari (El Capitan & Sierra) most of the .icon {} are cropped at the bottom.

• Safari Technology Preview Release 16 (Safari 10.1, WebKit 11603.1.10) on a MBP 13" Retina, Early 2015
• Safari Technology Preview Release 23 (Safari 10.2, WebKit 12604.1.5) on a MB 12" Retina

My Conclusion¶

I tried to fix the problem within the CSS with several ways. But I didn't find a generic or nice crossbrowser compatible "solution". I would say to wait until the responsible fix get's into Safari "stable" versions or completely remove Safari from our supported browsers list (just a bad joke). I also couldn't reproduce the 0,5px crop on retina displays always. Just in some cases, I get the crop on retina with (~0,5px). One more reason why it seems to be an upstream problem.

this issue is an upstream bug in safari, will close this issue.