Chrome cuts off parts of the type on the left, firefox and IE are displayed fine. Chrome error?

Question

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

The problem is that Chrome cuts off parts of the type (such as desenders and serifs), while other browsers render the type just fine. H3 is not in a hidden overflow container.

I tried (no luck):

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

The only solution that turned out to ever work gave H3 some other addition ... but I think this is an inappropriate solution, since then I will have to shift all the content below the headings by the same amount to the right.

Thoughts?

Answer 1

, , CSS, RenderLayer (, transform opacity). , , ​​ CSS. (, , ), .

Answer 2

, : Opera webkit

fooobar.com/questions/435265/..., css chrome EOT woff, ttf svg.

@font-face{
font-family:"Linotype Didot eText W01";
src:url("/dv2/2/dbcd27d7-e1e4-4757-b144-32def75c2eaa.eot?    d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c537 80c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c");
src:url("/dv2/3/6bfc2eb5-d4a7-42d3-a372-305f28511a22.woff?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c") format("woff"),url("/dv2/1/b66a964d-58b6-42f1-a3f7-fecb060b2ec3.ttf?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c") format("truetype"),url("/dv2/11/0a52b68f-a61f-4fa5-a685-99f557fcd924.svg?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c#0a52b68f-a61f-4fa5-a685-99f557fcd924") format("svg");
font-weight:400;font-style:normal;
}

, svg-, ttf, wof.

: -, , Chrome EOT , , .

Answer 3

,

    text-indext: 4px;

. emample @Nico O jsfiddle 16px .

Answer 4

, , .

: http://jsfiddle.net/p7wum0bp/1/

, j , . , .

, , , . , . :

.b-capa-list-item h3
{
    font-family: "Linotype Didot eText W01";
    font-size: 25px;
    padding-bottom: 7px;
    text-transform: lowercase;
    font-style: italic;
    margin: 0 -10px;
    padding: 0 10px;
}

:

---

With @Ilya Streltsyn's answer, I was able to repeat the problem in jsFiddle using the opacity property. You can see the behavior here: http://jsfiddle.net/p7wum0bp/3/