Safari narušuje pozicování prvku přes jQuery

22. 11. 2019 09:38:11

Hezký den,

na webu https://www.madlove.cz/molecool/ mám problém, že po pár vteřinách, kdy sjede točící se pilulka, tak místo toho, aby se jen lehce hýbala na místě, tak sjede úplně zhora ještě 5x než se konečně dostane ke správnému pohybu.

Chrome i mozilla to poberou bez problémů, nevíte, kde by mohla být chyba nebo jakým způsob to opravit i pro safari?

Kód, který je asi problémový (trochu hrubě napsaný, zkoušel jsem různé úpravy :) ):

ten poslední interval s 50ms je pro první animaci točení pilulky.

Díky,

Michal

22. 11. 2019 09:38:11

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425249

tuk

(2 hodnocení)

22. 11. 2019 09:41:52

Jaký kód dělá ten pohyb?

22. 11. 2019 09:41:52

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425248

Michal Běhal

(59 hodnocení)

22. 11. 2019 09:45:13

Napsal tuk;1555035
Jaký kód dělá ten pohyb?

Přidal jsem do textu

22. 11. 2019 09:45:13

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425247

tuk

(2 hodnocení)

22. 11. 2019 09:54:20

Mohl by to způsobovat ten selektor nth-child. Safari s ním má něco za problém.

Can I use... Support tables for HTML5, CSS3, etc

22. 11. 2019 09:54:20

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425246

Michal Běhal

(59 hodnocení)

22. 11. 2019 09:57:57

Napsal tuk;1555042
Mohl by to způsobovat ten selektor nth-child. Safari s ním má něco za problém.
Can I use... Support tables for HTML5, CSS3, etc

Zkusil jsem to přepsat na first-child, ale nemám safari :) Můžeš prosím zkusit, jestli to funguje, jestli na to koukáš v safari?

22. 11. 2019 09:57:57

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425245

tuk

(2 hodnocení)

22. 11. 2019 10:02:03

Na browserstack.com se lze podívat přes několik prohlížečů.

22. 11. 2019 10:02:03

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425244

Michal Běhal

(59 hodnocení)

22. 11. 2019 10:04:32

Napsal tuk;1555046
Na browserstack.com se lze podívat přes několik prohlížečů.

To jsem zkoušel, ale tam mi funkce kupodivu fungovala bez problémů.

22. 11. 2019 10:04:32

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425243

Dominik Hašek

(12 hodnocení)

22. 11. 2019 10:04:48

Problém je ten, že se opakuje transition na elementu .pill. S obrázky v tomto elementu vloženýma to nemá nic společného. Zkusím se na to podívat až budu mít chvíli, jestli nikdo od té doby nepřijde s řešením.

22. 11. 2019 10:04:48

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425242

Michal Běhal

(59 hodnocení)

22. 11. 2019 10:08:55

Napsal Toliceek;1555049
Problém je ten, že se opakuje transition na elementu .pill. S obrázky v tomto elementu vloženýma to nemá nic společného. Zkusím se na to podívat až budu mít chvíli, jestli nikdo od té doby nepřijde s řešením.

Díky, není možné, že je to tím, že je prvek na začátku mimo okno?

22. 11. 2019 10:08:55

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425241

Dominik Hašek

(12 hodnocení)

22. 11. 2019 10:10:49

Všiml jsem si toho že to dělá jen když je transition: top 3s ease-out nastavena na stejně nebo více sekund než je změna té top hodnoty v jQuery (tedy také 3 sekundy). Zkus nastavit

Když jsem to zkoušel změnit on fly tak to pomohlo. Je možné že tam dělá bordel to, že do té stejné hodnoty ze které se se dělá transition mezi tím zasahuje JS.

22. 11. 2019 10:10:49

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425240

Petr Široký

(26 hodnocení)

22. 11. 2019 10:16:36

Neřeknu ti konkrétně co je tady za problém a snad do toho nevznesu nějaké zmatky, ale setkal jsem se s tím, že kombinace transition a animací přes jquery dělala podobné problémy, možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.

Vygooglit se toho dá spousta, např. https://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions

22. 11. 2019 10:16:36

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425239

Michal Běhal

(59 hodnocení)

22. 11. 2019 10:18:19

Napsal Toliceek;1555052
Všiml jsem si toho že to dělá jen když je transition: top 3s ease-out nastavena na stejně nebo více sekund než je změna té top hodnoty v jQuery (tedy také 3 sekundy). Zkus nastavit

transition: top 2.9s ease-out, opacity 0.6s ease-in-out

Když jsem to zkoušel změnit on fly tak to pomohlo. Je možné že tam dělá bordel to, že do té stejné hodnoty ze které se se dělá transition mezi tím zasahuje JS.

Skvěle, asi to opravdu narušovalo, s tím 2.9s to funguje :) Díky moc

---------- Příspěvek doplněn 22.11.2019 v 10:19 ----------

Napsal Petr Široký;1555055
Neřeknu ti konkrétně co je tady za problém a snad do toho nevznesu nějaké zmatky, ale setkal jsem se s tím, že kombinace transition a animací přes jquery dělala podobné problémy, možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.
Vygooglit se toho dá spousta, např. https://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions

Už to naštěstí funguje, ale souhlasím, že čistě jQuery bez kombinací by byla asi rozumnější cesta

22. 11. 2019 10:18:19

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425238

Michal Běhal

(59 hodnocení)

22. 11. 2019 10:20:23

Napsal Toliceek;1555052
Všiml jsem si toho že to dělá jen když je transition: top 3s ease-out nastavena na stejně nebo více sekund než je změna té top hodnoty v jQuery (tedy také 3 sekundy). Zkus nastavit
transition: top 2.9s ease-out, opacity 0.6s ease-in-out
Když jsem to zkoušel změnit on fly tak to pomohlo. Je možné že tam dělá bordel to, že do té stejné hodnoty ze které se se dělá transition mezi tím zasahuje JS.

Skvěle, asi to opravdu narušovalo, s tím 2.9s to funguje :) Díky moc

---------- Příspěvek doplněn 22.11.2019 v 10:20 ----------

Napsal Petr Široký;1555055
Neřeknu ti konkrétně co je tady za problém a snad do toho nevznesu nějaké zmatky, ale setkal jsem se s tím, že kombinace transition a animací přes jquery dělala podobné problémy, možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.
Vygooglit se toho dá spousta, např. https://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions

Už to funguje, ale souhlasím, že by byla rozumnější cesta jít bez kombinací

22. 11. 2019 10:20:23

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425237

Dominik Hašek

(12 hodnocení)

22. 11. 2019 10:31:55

Napsal Petr Široký;1555055
... možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.

Já bych to možná ještě otočil a udělal následnou nekonečnou animaci přes css. Přes @keyframes je to dokonce ještě jednodužší než přes jQuery, pomocí jQ by se pouze po úvodním efektu přidala classa která by danou animaci aktivovala. Animace přes CSS jsou podstatně méně náročné na výkon než ty stejné přes JS. V tomhle případě je to asi skoro jedno, ale při složitějších animacích tam může být opravdu podstatný rozdíl.

22. 11. 2019 10:31:55

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425236

Petr Široký

(26 hodnocení)

22. 11. 2019 11:25:52

Napsal Toliceek;1555069
Animace přes CSS jsou podstatně méně náročné na výkon než ty stejné přes JS.

Souhlas. Z principu se také snažím prakticky vše dělat jen přes css, dokud to jde. Moje poznámka byla mířena čistě na transition kvůli těm komplikacím, jinak by keyframes a jquery měly fungovat, protože tam to funguje na jiném principu - osobně jsem se setkal s problémy jen u transition s jquery.

22. 11. 2019 11:25:52

https://webtrh.cz/diskuse/safari-narusuje-pozicovani-prvku-pres-jquery#reply1425235