Czy możliwe jest "przyciąganie do piksela" po przetłumaczeniu CSS?

Utworzono pole modalne i wyśrodkowałem je pionowo za pomocą technique Chris Coyer mentioned. Jedyny problem, jaki udało mi się do tej pory odkryć, polega na tym, że czasami pudełko jest przesunięte o pół piksela, co może sprawić, że niektóre dzieci wyglądają na trochę nieudolne. Moje pytanie brzmi :: czy możliwe jest przyciągnięcie wyniku do najbliższego całego piksela?Czy możliwe jest "przyciąganie do piksela" po przetłumaczeniu CSS?

Aktualizacja

Oto kilka zdjęć, aby lepiej zilustrować problem. W tym pierwszym obrazie widać wejścia tekstowe i podkreśla Link są renderowane poprawnie:

Modal box with crisp lines

Drugi obraz przedstawia efekt po transformacje CSS zostały wykorzystane. Zwróć uwagę na rozmycie podkreślenia linku i niepoprawnie renderowane wejścia tekstowe.

enter image description here

Chociaż drugi obraz nie pokazują go od czasu do czasu zauważam górne i dolne białe linie dowcip ten sam efekt rozmycia.

W celu wprowadzenia do rejestru wejścia tekstowe są stylizowane za pomocą prostych obramowań i koloru tła. Podaję CSS dla tych wejść tu więc widać nic specjalnego dzieje:

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

Źródło

2013-08-15 James Long

Czy możesz opisać, co masz na myśli przez "dzieci wyglądają na trochę nieudolne"? Czy mówisz o problemach z wygładzaniem? Czy możesz pokazać nam zrzut ekranu lub odtworzyć problem w jsFiddle? – brianpeiris

@brianpeiris Dodałem zdjęcia, aby lepiej wyjaśnić pytanie –

Szczerze mówiąc, różnice są ledwo zauważalne. Użyłem narzędzia do porównywania obrazów i faktycznie są większe różnice w artefaktach kompresji niż faktyczne różnice (ponieważ zapisałeś zrzuty ekranu jako JPEG). Byłoby łatwiej odpowiedzieć na twoje pytanie, jeśli powiesz je w jsFiddle. – brianpeiris

Jeśli można uniknąć 3D przekształca i używać 2d przekształca zamiast tłumaczenia będą przyciągane do pikseli domyślnie:

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

rendering is snapped to pixels

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

rendering is anti-aliased

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

Źródło

2013-08-15 18:23:02 brianpeiris

+10

Używam transformacji 2D, ale nadal otrzymuję efekt. Co ciekawe, sprawdzenie linku na tej stronie w mojej wersji Firefoksa (23) pokazuje zarówno demonstracje z wyraźnymi liniami. –

Widzę też tylko problem z wygładzaniem krawędzi w Chrome. Wydaje się, że Firefox ma inny algorytm renderowania, który uwzględnia takie przypadki (chyba). – brianpeiris

To zdecydowanie problem z Chrome i był przez jakiś czas ... – BJury

Jedynym rozwiązaniem jest kuloodporny aby upewnić się, że elementem zajmuje nawet liczbę pikseli. Jeśli wysokość (lub szerokość) nie jest podzielna przez 2, to spróbuje wyrenderować twój element na półpikselu, powodując rozmycie.

Firefox nie ma tego problemu, ponieważ obsługuje renderowanie prawdziwych subpikseli. Tak więc, mimo że twój element jest na półpikselu, Firefox go obsługuje elegancko.

Z mojego doświadczenia wynika, że Webkit zazwyczaj przyciąga elementy do najbliższego piksela - (na przykład przy korzystaniu z właściwości letter-spacing) - więc to dziwne, że nie zachowuje się tak samo dla translate.

Źródło

2014-05-07 21:09:52 derrylwc

Gdy napotkałem ten sam problem z subpikselami w Chrome, aw wersji 64 nadal nie można obsłużyć wartości przekształconych subpikseli, zdecydowałem się napisać mały skrypt js, który naprawia problem subpiksela. Można go znaleźć na github. Po prostu zaokrągla wartość transformacji do pełnego piksela.

nadzieję, że ktoś znajdzie to pomocne!

Źródło

2018-02-26 16:20:00 engray

Czy możliwe jest "przyciąganie do piksela" po przetłumaczeniu CSS?

Odpowiedz

Powiązane problemy