Frontend developer externista
Zobrazují se odpovědi 1 až 15 z 15

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

  1. 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 :) ):
    Kód:
    setTimeout(function () {
            $(".pill").css('top', '49%');
    
            setInterval(function () {
                $(".pill").css('top', '49%');
                setTimeout(function () { $(".pill").css('top', '52%'); }, 3000);
            }, 6000);
    
            setTimeout(function () { $(".pill").css('top', '52%'); }, 3000);
    
            setInterval(function () {
                if (!$(".pill img:nth-child(1)").hasClass("last")) {
                    $(".pill img:nth-child(1)").appendTo(".pill");
                }
            }, 50);
    
    
        }, 5500);
    ten poslední interval s 50ms je pro první animaci točení pilulky.

    Díky,
    Michal

  2. Co se právě děje na Webtrhu?
    Pugis poptává: Pomoc s chybou ve Wordpressu
    CaBomm poptává: Někdo eshop na prodej?
    Filip Rufer poptává: Konzultace gettext nette
  3. Jaký kód dělá ten pohyb?

  4. Citace Původně odeslal tuk Zobrazit příspěvek
    Jaký kód dělá ten pohyb?
    Přidal jsem do textu

  5. 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

  6. Citace Původně odeslal tuk Zobrazit příspěvek
    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?

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

  8. Citace Původně odeslal tuk Zobrazit příspěvek
    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ů.

  9. 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.

  10. Citace Původně odeslal Toliceek Zobrazit příspěvek
    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?

  11. 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

    Kód:
    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.

  12. 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/...ss-transitions

  13. Citace Původně odeslal Toliceek Zobrazit příspěvek
    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

    Kód:
    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 ----------

    Citace Původně odeslal Petr Široký Zobrazit příspěvek
    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/...ss-transitions
    Už to funguje, ale souhlasím, že by byla rozumnější cesta jít bez kombinací

  14. Citace Původně odeslal Petr Široký Zobrazit příspěvek
    ... 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.

  15. Citace Původně odeslal Toliceek Zobrazit příspěvek
    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.

  16. Btw jen k safari. Mám tam často problémy a hromadu z nich řeší will-change. Tak třeba to někomu pomůže.

Hostujeme u Server powered by TELE3