È possibile "scattare su pixel" dopo una conversione CSS?

Ho creato una casella modale e l'ho centrata verticalmente con uno technique Chris Coyer mentioned. L'unico problema che ho riscontrato finora è che a volte il riquadro è sfasato di mezzo pixel, il che può rendere alcuni dei bambini un po 'vistosi. La mia domanda è: è possibile scattare il risultato sul pixel intero più vicino?È possibile "scattare su pixel" dopo una conversione CSS?

Aggiornamento

Qui ci sono un paio di foto per illustrare meglio il problema. In questa prima immagine, si possono vedere gli ingressi di testo e le sottolineature di collegamento hanno reso correttamente:

Modal box with crisp lines

La seconda immagine mostra l'effetto dopo che sono state utilizzate le trasformazioni CSS. Notare la sfocatura della sottolineatura del collegamento e gli input di testo visualizzati in modo errato.

enter image description here

Anche se la seconda immagine non vederlo, talvolta noto le linee bianche superiore e inferiore arguzia lo stesso effetto sfocato.

Per la registrazione, gli input di testo sono stilizzati utilizzando bordi semplici e un colore di sfondo. Ho incluso il CSS di questi ingressi qui così si può vedere non c'è niente di happening speciale:

input { 
    background-color: #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 0; 
    box-shadow: 0 1px 3px -1px #D5D5D5 inset; 
    color: #4C4C4C; 
    display: inline-block; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    max-width: 100%; 
    padding: 5px; 
    transition: border-color 0.1s ease 0s; 
}

fonte

2013-08-15 James Long

Puoi descrivere cosa intendi per "i bambini sembrano un po 'confusi"? Stai parlando di problemi di antialiasing? Puoi mostrarci uno screenshot o riprodurre il problema in jsFiddle? – brianpeiris

@brianpeiris Ho aggiunto le foto per spiegare meglio la domanda –

Onestamente, le differenze sono appena percettibili per me. Ho usato uno strumento di confronto delle immagini e ci sono in realtà più differenze negli artefatti di compressione rispetto alle differenze effettive (perché hai salvato gli screenshot come JPEG). Sarebbe più semplice rispondere alla tua domanda se lo hai riprodotto in jsFiddle. – brianpeiris

Se si può evitare trasformazioni 3D e utilizzare 2d trasforma invece, la traduzione si aggancerà al pixel per impostazione predefinita:

transform: translate(-50%, -50%);

rendering is snapped to pixels

transform: translate3d(-50%, -50%, 0);

rendering is anti-aliased

.210

JSBin:http://jsbin.com/epijal/3/edit

fonte

2013-08-15 18:23:02 brianpeiris

+10

Sto usando le trasformazioni 2D ma ottengo ancora l'effetto. Curiosamente, controllando il collegamento su questa pagina nella mia versione di Firefox (23) mostra entrambe le dimostrazioni con linee nitide –

Inoltre vedo solo il problema di antialiasing in Chrome. Firefox sembra avere un algoritmo di rendering diverso che spiega casi come questo (credo). – brianpeiris

È sicuramente un problema di Chrome ed è stato per qualche tempo ... – BJury

L'unica soluzione a prova di proiettile è quello di garantire che il vostro elemento occupa un numero anche di pixel. Se l'altezza (o la larghezza) non è divisibile per 2, tenterà di rendere l'elemento su un mezzo pixel, causando la sfocatura.

Firefox non presenta questo problema perché supporta il rendering di subpixel reali. Quindi, anche se il tuo elemento si trova su un mezzo pixel, Firefox lo gestisce in modo elegante.

In base alla mia esperienza, Webkit tipicamente esegue lo snap degli elementi al pixel più vicino (ad esempio, quando si utilizza la proprietà letter-spacing), quindi è strano che non si comporti allo stesso modo per translate.

fonte

2014-05-07 21:09:52 derrylwc

Come ho riscontrato lo stesso problema con subpixel in Chrome e nella versione 64 non è ancora in grado di gestire i valori di trasformazione subpixel, ho deciso di scrivere script js piccolo, che risolve il problema subpixel. Puoi trovarlo su github. Semplicemente arrotonda il valore di trasformazione al pixel intero.

La speranza che qualcuno lo troverà utile!

fonte

2018-02-26 16:20:00 engray

È possibile "scattare su pixel" dopo una conversione CSS?

risposta

Problemi correlati