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:

Answer 1

It appears that the text starts to be cut off when at least one CSS property that promotes the element to RenderLayer is applied (e.g. transform or opacity). So it seems to be the internal problem of the renderer that can't be fixed easily at CSS level. I'd recommend just to add some left padding (and right padding, if necessary) to make all letters fit inside the element boundaries, and compensate these paddings by transform or negative margins.