Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18

Discussione: problema compatibilità Chrome

  1. #1

    problema compatibilità Chrome

    Buongiorno a tutti, ho un problema a cui non riesco a venirne a capo. Navigando questo sito web http://www.u-lump.com/ con safari e mozzilla nella homepage vedo una gallery che posso scorrere con sotto tre blocchi uno grigio con testo, uno rosso con altro testo e uno a destra con una foto. Navigando lo stesso sito con chrome riesco a vedere solo la gallery, ma non vedi i tre blocchi sotto. Qualcuno è in grado di dirmi cosa succede?

    Grazie in anticipo,
    Claudio

  2. #2
    Credo che il problema sia in un blocco CSS con le istruzioni di animazione

    codice:
    .animation1 {   
        -webkit-transform:scaleY(0.000001);
        -moz-transform:scaleY(0.000001);
        -ms-transform:scaleY(0.000001);
        -o-transform:scaleY(0.000001);
        opacity:0;
        -webkit-transition:all .4s 0 ease;
        -moz-transition:all .4s 0 ease;
        -ms-transition:all .4s 0 ease;
        -o-transition:all .4s 0 ease;
        transition:all .4s 0 ease
    }
    
    
    .animation2 {
        -webkit-transform:scaleX(0.000001);
        -moz-transform:scaleX(0.000001);
        -ms-transform:scaleX(0.000001);
        -o-transform:scaleX(0.000001);
        opacity:0;
        -webkit-transition:all .4s 0 ease;
        -moz-transition:all .4s 0 ease;
        -ms-transition:all .4s 0 ease;
        -o-transition:all .4s 0 ease;
        transition:all .4s 0 ease
    }
    ispeziona di chrome mi riporta "invalid property value" su
    -webkit-transition:all .4s 0 ease;
    transition:all .4s 0 ease

    quindi cosa dovrei fare?
    Ultima modifica di klavs; 10-01-2018 a 15:08

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    299
    Le transition sono dichiarate male, quello 0 prima di ease (ammesso che sia il delay) deve andare dopo ease.
    Sposta tutti gli 0 e vedrai che funziona, ti linko anche una guida:

    https://css-tricks.com/almanac/properties/t/transition/

  4. #4
    Grazie per la risposta, ho provato a fare come mi hai detto, ispeziona di Chrome da ancora l'alert. Adesso il codice è così
    codice:
    .animation1 {   
        -webkit-transform:scaleY(0.000001);
        -moz-transform:scaleY(0.000001);
        -ms-transform:scaleY(0.000001);
        -o-transform:scaleY(0.000001);
        opacity:0;
        -webkit-transition:all .4s ease 0;
        -moz-transition:all .4s ease 0;
        -ms-transition:all .4s ease 0;
        -o-transition:all .4s ease 0;
        transition:all .4s ease 0
    }
    
    
    .animation2 {
        -webkit-transform:scaleX(0.000001);
        -moz-transform:scaleX(0.000001);
        -ms-transform:scaleX(0.000001);
        -o-transform:scaleX(0.000001);
        opacity:0;
        -webkit-transition:all .4s ease 0;
        -moz-transition:all .4s ease 0;
        -ms-transition:all .4s ease 0;
        -o-transition:all .4s ease 0;
        transition:all .4s ease 0
    }
    Ultima modifica di klavs; 11-01-2018 a 00:03

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    299
    Sul sito il codice non è cambiato, forse c'è una cache attiva che devi ripulire?

  6. #6
    Ho ripristinato il file originale perché mi sono accorto che non stava producendo nessun effetto. Ora lo modifico e lo sistemo come mi hai consigliato così hai modo di verificarlo.

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    299
    In effetti avevo fatto un errore, lo 0 se lo metti in fondo è un delay e va messo in secondi, quindi diventerebbe 0s

  8. #8
    ho provato ad aggiungere la s dopo lo zero e ispeziona di Chrome non lo conta più come "invalid property value", però l'animazione continua a non vedersi.

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    299
    Ok abbiamo risolto un problema, però ce ne sono altri.

    Il tuo div è invisibile in quanto ha opacity a 0 e una scaleY(0.000001) che lo rimpicciolisce, immagino tu voglia che entrambi i valori vengano riportati a 1 rendendo così il div visibile e vorresti farlo tramite la transition.

    Il problema è che la transition è un'animazione che ci porta da uno stato ad un'altro, da sola non parte (o almeno io non so come fare, forse qui qualcuno più esperto di css potrebbe darci una mano) se non gli forniamo uno stato "di arrivo" con opacity 1 e scaleY(1).

    La prima cosa ce mi viene in mente è farlo in javascript, ma ripeto, qualcuno più esperto di me può avere un'idea utilizzando solo i css.

  10. #10
    La cosa strana è che solo il browser Chrome da problemi, quindi mi viene da pensare che la logica del codice non sia sbagliata, ma sia solo questione di sintassi. La seconda cosa è che un tempo funzionava, quindi immagino che il codice non sia supportato dalla versione attuale del browser.

    Se non facessi danno sposterei la discussione sul forum CSS, che magari è più specifico, ma non so come si fa senza evitare richiami dagli amministratori.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.