pixel error mit überlauf: versteckt und transform: translate

Question

Ich habe eine Box mit einer Beschriftung, die position: absolute ist und mit top: 100% versteckt. Das übergeordnete Element der Beschriftung hat overflow: hidden. Wenn ich die Box schwenke, gleitet die Beschriftung nach oben, so dass sie vollständig sichtbar ist.

Das Problem ist jetzt, dass es während dieses Übergangs einen Pixelfehler gibt. Das bedeutet, dass die Beschriftung während des Übergangs 1 Pixel weniger breit ist als die übergeordnete Box. Nach dem Übergang sieht alles gut aus.

Es erscheint in IE 11 unter Windows 8.1 und in Webkit-Browsern unter Mac 10.11.2.

Sie sollten diesen Effekt in this fiddle sehen. Wenn der Pixelfehler nicht angezeigt wird, versuchen Sie, die Größe des Fensters zu ändern.

Sie sehen auch den Fehler auf dem Screenshot.

Ich habe bereits versucht:

• die Beschriftung 1 Pixel breiter eingestellt
• hinzufügen overflow-x: hidden
• hinzufügen translate3d

Answer 1

Ich werde es versuchen Verwenden Sie eine dieser Optionen:

Position: relativ;

-webkit-transform: translateZ (0px);

-webkit-font-smoothing: subpixel-antialiased; oder webkit-font-smoothing: antialiased

Answer 2

Ich habe diesen Fehler vor. Der Pixelfehler wird durch die Transformation verursacht: translate.

versuchen Sie dies auf dem Elternelement.

-webkit-transform-style: preserve-3d; 

-moz-transform-style: preserve-3d; 

transform-style: preserve-3d;