Safari cuts off fonts with characters that go outside of font-file Bounding-Box

Question

I'm working on a typography-focused website and stumbled upon a major font rendering issue with Safari (9.0.3) on OS X El Capitan.

I think Safari is known to have problems with Glyphs that go outside of the font files Bearing Bars, especially on hover changes. I found a workarounds for that, but I still have issues with plain text inside a div-block:

http://jsfiddle.net/bRs3Q/9/

CSS

 body{
             font-size:120px;
             text-align: center;
             text-transform: uppercase;
             font-family: Arial;
             font-style:italic;
     }

.text{
             display:block;
             width:80%;
             margin:0px auto;
      }

Safari always cuts the font right before one line is nearing a line-break and at the exact point where the glyph is going out of the font-files bounding box.

Is there a way of changing the font-rendering oder manipulating the line-break?

Answer 1

I had a similar problem with an own font. You might be able to fix it the same way i did: Add i.e. 20px padding and -20px margin.

See also: Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?

Answer 2

Had the same issue where the uppercase char (or other characters) was cut off at the top. The cut off was not so big, so making some spacing (like previously comment suggestion) at the top with padding-top: 10px (or whatever value is needed) is doing the work. The green padding area wasn't visible before that.