Autor Zpráva
Tomášeek
Profil
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
Kajman
Profil
Přijde mi, že to poskakuje, když má popisek v pixelech lichou šířku. Když se zafixuje na 60px, tak to nedělá, když na 59 nebo 61px tak ano. Ale opravit to neumím :-)
Kcko
Profil
Tomášeek:
Tohle je imho pokud se nepletu známý bug při centrování skrze transform. Řeší to nějaká CSS 3 vlastnost, z hlavy nevím (na spojení něco jako "css transform font blurry" to najdeš), takže bych řekl, že tobě to pomůže taky.
Tomášeek
Profil
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
Profil
Tomášeek:
Můžeš ukázat úpravu před a po? 3D transformace asi bude mít horší podporu.
(Občas to taky hledám a drahnou dobu zkouším, než se to chytne, uložím si to do snippetů).
Tomášeek
Profil
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
Profil
Tomášeek:
Na druhou variantu bych se tedy vykašlal ...
Tomášeek
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0