Zadejte hledaný výraz...

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

Michal Běhal
verified
rating uzivatele
(59 hodnocení)
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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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
verified
rating uzivatele
(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ý
verified
rating uzivatele
(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
verified
rating uzivatele
(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
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
verified
rating uzivatele
(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
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
verified
rating uzivatele
(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ý
verified
rating uzivatele
(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
Pro odpověď se přihlašte.
Přihlásit