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 span u, 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 |
#2 · Zasláno: 15. 8. 2019, 22:48:15
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 |
#3 · Zasláno: 15. 8. 2019, 23:23:48
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 |
#4 · Zasláno: 16. 8. 2019, 10:41:57
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 |
#5 · Zasláno: 16. 8. 2019, 20:32:36
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 |
#6 · Zasláno: 16. 8. 2019, 20:35:45
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 |
#7 · Zasláno: 16. 8. 2019, 20:56:38
Tomášeek:
Na druhou variantu bych se tedy vykašlal ... |
||
Tomášeek Profil |
#8 · Zasláno: 17. 8. 2019, 06:37:39
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. |
||
Časová prodleva: 7 měsíců
|
|||
Tomáš123 Profil |
Tomášeek:
V prípade takéhoto typu centrovania ide využiť, že margin (ale aj napríklad left ) sa počíta zo šírky nadradeného bloku. Môže tak fungovať posunutie o polovicu šírky pôvodného elementu doprava a následne o polovicu šírky popisu naspäť. Živá ukázka.
|
||
Tomášeek Profil |
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 Profil |
#11 · Zasláno: 19. 3. 2020, 09:30:07
Tomášeek:
Hm, čudné, že si riešenie prehliadol aj napriek vysvetleniu. Nuž, pozri sa lepšie. :-) Dvomi emkami som nahradil tvoje posunutie textu o statických 25 pixelov. |
||
Tomášeek Profil |
#12 · Zasláno: 19. 3. 2020, 09:43:45
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. |
||
Tomáš123 Profil |
Tomášeek:
Safari malo problém centrovať 50 % záporným margin om, ale úprava na relatívnu pozíciu a záporný left zrejme problém opravuje.
|
||
Časová prodleva: 4 roky
|
0