Odkrywca internetu nie anty aliasing obrócony obraz

Question

Mam div z obrazem tła, który obracam. Poniżej jest moje zasady css, aby go obrócić:

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */ 
transform: rotate(3.1deg); /* firefox & IE9+ */ 
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
} 

Problem jest w IE krawędzie obrazu są bardzo topornie i poszarpany zamiast gładkich linii i nie wydają się być antyaliasing. Czy ktoś wie, jak to naprawić? Robił to w chrome, dopóki nie zaaplikowałem dla niego poprawki, stosując -webkit-backface-visibility: hidden; który działał świetnie na chrome, po prostu potrzebuję podobnej poprawki dla IE, jeśli taki istnieje.

Aby replikować ten problem wklej następujący do pliku HTML i patrzeć na nią w IE:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div> 

Answer 1

Aby obejść ten problem i używane cienie skrzynkowych, które wydawało się do pracy i sprawiają, krawędzie gładkie

Answer 2

Funkcja wygładzania nie działa na dużych obrazach, jeśli wysokość i szerokość zostały wymuszone za pomocą CSS (IE11, 10 i 9). Zrobiłem kilka (bardzo) przybliżonych testów i dedukuję prace antyaliasingowe poniżej 1000px.

Wciąż szukam oficjalnego źródła tego problemu.

Answer 3

@ geoffs3310, Czuję twój ból.

Znalazłem problem z IE11 i niektórymi innymi przeglądarkami (Safari na iPadzie i w przeglądarce Chrome oraz domyślna przeglądarka na Samsung Galaxy Tab A). Aby obejść to, rzuciłem ciemny kolor tła na element zawierający obraz tła. Nie wiem dlaczego, ale wydaje się, że to wystarczy, np.

background-color: black; 

aw przypadku ktokolwiek czyta ten post, pozwól mi przedstawić kilka innych poprawek znalazłem w kontaktach z różnych zagadnień związanych z wypaczenia treści. Uwaga, wszystkie one są stosowane do przekształconego elementu kontenera.

eliminuje jagginess przyciski dostać po pochylanie obroty są stosowane (kudos):

transform-style: preserve-3d; 

Wyeliminowanie rozmyte gdzie został użyty <canvas> (kudos to Zoltan). Uwaga, jeśli istnieją inne transformacje na elemencie zadeklarować je na oddzielnych liniach zamiast skrót (z pamięci to było obejść podobnym Safari wydania)

transform: perspective(0); 

I kolejna poprawka, chociaż moja dokumentacja brakuje co naprawia , Myślę, że miało to związek z jankrową lub niewyraźną treścią w IE-try:

outline: 1px solid transparent;