PDA

Visualizza la versione completa : Zoom non Sfocato


Luigi636
10-04-2016, 19:59
Salve,
ho applicato questo CSS ad una piccola tabella, tuttavia quando vado a fare lo zoom si vede tutto sfocato..
Il codice questo:



.servizio{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform:translateZ(0) scale(1.10); /* Safari and Chrome */
-moz-transform:scale(1.10); /* Firefox */
-ms-transform:scale(1.10); /* IE 9 */
-o-transform:translatZ(0) scale(1.10); /* Opera */
transform:translatZ(0) scale(1.10);
}
.servizio:hover{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform:translateZ(0) scale(1.10); /* Safari and Chrome */
-moz-transform:scale(1.10); /* Firefox */
-ms-transform:scale(1.10); /* IE 9 */
-o-transform:translatZ(0) scale(1.10); /* Opera */
transform:translatZ(0) scale(1.10);
}
Ho provato ad invertire il processo, cos:



.servizio{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform:translateZ(0) scale(0.90); /* Safari and Chrome */
-moz-transform:scale(0.90); /* Firefox */
-ms-transform:scale(0.90); /* IE 9 */
-o-transform:translatZ(0) scale(0.90); /* Opera */
transform:translatZ(0) scale(0.90);
}
.servizio:hover{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform:translateZ(0) scale(1.00); /* Safari and Chrome */
-moz-transform:scale(1.00); /* Firefox */
-ms-transform:scale(1.00); /* IE 9 */
-o-transform:translatZ(0) scale(1.00); /* Opera */
transform:translatZ(0) scale(1.00);
}
Ma il risultato che ora sfocato quando non in hover..

emi10
13-04-2016, 08:54
Ciao,

Hai un link dove posso vedere la pagina direttamente online ? Cosi posso vedere l'intero codice.

Oppure posta l'intero codice, anche la parte HTML che fa parte della classe servizio.

Luigi636
13-04-2016, 13:10
Ciao,

Hai un link dove posso vedere la pagina direttamente online ? Cosi posso vedere l'intero codice.

Oppure posta l'intero codice, anche la parte HTML che fa parte della classe servizio.
Certo
www.SEOagenzia.com (http://www.SEOagenzia.com)

emi10
13-04-2016, 14:57
Grazie.

Da quanto vedo se non passi il mouse sopra la tabella sfocato.
Se poi passi il mouse con l'effetto hover si vede correttamente.

In sostanza vorresti che non risultasse mai sfocato ?

emi10
13-04-2016, 15:17
C' qualcosa nello zoom, che opacizza.

Prova a cancellare il tuo codice e sostituiscilo con questo. Dimmi che succede.
Cosi poi posso vederlo online e cercare di correggerlo.
Ovviamente salvati il tuo codice da qualche parte.



.servizio {
-webkit-transition: all 250ms ease-in-out!important;
-moz-transition: all 250ms ease-in-out!important;
-ms-transition: all 250ms ease-in-out!important;
-o-transition: all 250ms ease-in-out!important;
transition: all 250ms ease-in-out!important;
}


.servizio:hover {
-webkit-transform: scale(1.1,1.1)!important;
-moz-transform: scale(1.1,1.1)!important;
-o-transform: scale(1.1,1.1)!important;
-ms-transform: scale(1.1,1.1)!important;
transform: scale(1.1,1.1)!important;
opacity: 0.7!important;
}

ResianTaxidrive
13-04-2016, 15:21
Sembrerebbe che il problema sia su Chrome soltanto, non ho guardato Safari.
Comunque prova a usare zoom: 90% o zoom:110%. Un po' meglio sembra andare.

Luigi636
14-04-2016, 00:02
Grazie.

Da quanto vedo se non passi il mouse sopra la tabella sfocato.
Se poi passi il mouse con l'effetto hover si vede correttamente.

In sostanza vorresti che non risultasse mai sfocato ?
Si, tra i due mali ho preferito questo..:D
Si, mai sfocato, sempre limpido!:D
Ora provo quel codice e ti dico..;)

-- edit --

Perfetto!
Unica sciocchezza che rimasta, la linea tratteggiata (simile a quella di selezione) si sfoca sulle righe in bianco..
Ho provato anche in questo caso ad invertire l'azione mettendo uno 0.9 di grandezza normalmente, che diventa un 1 sull'hover ma con questo test diventano sfocate le righe quando il div non ha il mouse sopra (hover).
Potete vedere il risultato aggiornato se volere

emi10
14-04-2016, 10:42
Bene!

Mi scrivi esattamente il codice che hai usato ? Cosi lo testo e ti dico.

Luigi636
15-04-2016, 12:50
Certo!



.servizio {
-webkit-transition: all 350ms ease-in-out!important;
-moz-transition: all 350ms ease-in-out!important;
-ms-transition: all 350ms ease-in-out!important;
-o-transition: all 350ms ease-in-out!important;
transition: all 350ms ease-in-out!important;
-webkit-transform: scale(0.9,0.9)!important;
-moz-transform: scale(0.9,0.9)!important;
-o-transform: scale(0.9,0.9)!important;
-ms-transform: scale(0.9,0.9)!important;
transform: scale(0.9,0.9)!important;
}




.servizio:hover {
-webkit-transform: scale(1,1)!important;
-moz-transform: scale(1,1)!important;
-o-transform: scale(1,1)!important;
-ms-transform: scale(1,1)!important;
transform: scale(1,1)!important;
}

Loading