html - Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?

Question

I have a regular H3 element with a custom font (Didot from Linotype) in italic style. See:

The issue is that Chrome is clipping parts of the type (such as the descenders and serifs) while other browsers display the type just fine. The H3 is not in any container with hidden overflows.

I've tried (without luck):

• overflow: visible
• text-rendering: optimizeLegibility; (and other values)
• * { overflow: visible !important; }
• Other "kerning" tricks out there

The only solution that has appeared to ever work is giving the H3 some left padding... but I feel this is an inappropriate solution as I would then have to shift all contents below headings the same amount to the right.

Thoughts?

Answer 1

I fixed a similar issue to this by adding a small text indent

    text-indext: 4px;

The exact indent value needed will differ depending on the font itself and the size of the font. For emample using @Nico O jsfiddle adding a 16px text indent fixes the issue.