Zoom non Sfocato

[Luigi636]

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]

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]

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

[emi10]

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]

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]

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]

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..
Si, mai sfocato, sempre limpido!
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]

Bene!

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

[Luigi636]

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;
}