Text nehezky poskakuje v kombinaci Transform + opacity

Ahoj,

narazil jsem na pro mě zajímavý problém, z kterého moc nevím, jak ven. Konkrétně jde o kombinaci transform + opacity, kdy text (a někdy i okraje elementu) nehezky poskakuje. U okrajů elementů to ještě jakžtakž chápu, zkrátka posun při centrování narazil na půlpixel a pak se někam doposune. Ale že se mi přeskládávají i písmenka (asi právě vinou těch zlomkově-pixelových posunů), to už je na mě moc :-)

O to divnější je celá situace tím, že při hoveru měním jen opacity, pozice by měla být ustálená už z původního (ne-hoverového) stavu. Chápal bych, kdybych nastavoval i pozici při hoveru, ale to se neděje.

Pokud odeberu opacity, vše se narenderuje správně.
Pokud odeberu transform (užitý pro vycentrování elementu), tak také vše v pořádku.
Kombinace obojí mě zlobí.

Spáchal jsem i ukázku, o co konkrétně jde: Odkaz

Problém pozoruji na lehce v Chromu (Mac i Win8) a Safari/Mac (zde viditelnější).
Pokud nebude problém hned zřejmý/viditelný, doporučuji lehce hnout s velikostí písma v tom spanu, možná to "pomůže".

Poradítě někdo zkušenější?

Ještě doplním video, jak to vypadá v reálu, nahráno v Mac/Safari.

imgur.com/a/0oP7PXJ

Kcko:
Super, díky za nakopnutí. Samozřejmě jsem hledal, ale netrefil jsem to správné slovní spojení - zaměřil jsem se spíše na "poskakování textu", než rozmazání.

Pomohlo nahradit 2D transformaci za 3D transformaci a přidat backface-visibility.

Kcko:
Ano, podpora horší je, pro nepodporovane zůstane 2D transform s doostrenim. To se nedá nic dělat, lepší řešení jsem nenašel.

Druhá varianta, která mě napadla v souvislosti s Kajmanem, zjistit šířku elementu a nastavit ji na sudou javascriptem. Ještě promyslím a vyzkouším.

Kcko:
Ano, nechce se mi do ni.

Musím protestovat, kde se to jak zobrazuje a jak moc s tím jsem (ne)spokojen a kolika lidem se zobrazí text ostre a kolika neostre. Pak muže nastoupit fallback v podobě JS. Snad nebude třeba.

Každopádně díky za nakopnuti, moc jsi mi pomohl.

Tomáš123:
Bohužel v tomto případe nelze. Kdyby to bylo mozne, neřešil bych to tehdy tak, jak jsem to řešil :-)

Podívej se na přiložené video. Centruji prvek neznáme šířky nad rodičem neznáme šířky, který je navíc užší. Posun o absolutní délku (ve tvém případe 2em) samozrejme možný neni.

Tomáš123:
Hm, koukal jsem na to na tabletu. Viděl jsem rozdíl v tom topu (což jsem se rozespalý mylně domníval, že je left) a nevšiml si změny HTML a přidání elementu. Myšlenka je asi správná, uvedená ukázka přesto nefunguje v Safari na Macu.

Popravdě, nechce se mi v tom po 3/4 roce nějak extra šťourat, jen jsem považoval za slušné na tebe zareagovat. Bohužel, upravený kód jsem si blbě přečetl, cílem nebyl vznik flamu.