Przeglądarka antyaliasing (gładkie linie)

W moim suwaka, mam ten problem, że po moim blaknięcie efekt kończy się częścią mojego obróconym kontenerze wygląda kroku. Mogę podać przykład tutaj:Przeglądarka antyaliasing (gładkie linie)

http://lamit.webflow.com

Jak widać na suwaku, podczas efektu, w dolnej części mojego tekstu-bar jest gładka. Jednak po przejściu wygląda to dziwnie.

Każdy pomysł, w jaki sposób pozbyć się tego?

Aktualizacja

Ponieważ ta strona jest wykonywana w webflow, istnieją pewne CSS błędy podczas analizowania kodu (z powodu pewnych preventions z Webflow).

Odpowiedni kod jest poniżej:

CSS

.mask { 
    left: -2%; 
    top: -50px; 
    display: block; 
    width: 105%; 
    margin-right: auto; 
    margin-left: auto; 
    -webkit-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade"> 
    <div class="w-slider-mask mask"> 
     <div class="w-slide"> 
      <div class="slide-zusatz1"> 
       <div class="w-container slidertext"> 
        <p>Here is some text</p> 
       </div> 
      </div> 
      <img src="myimg.png"> 
     </div> 
    </div> 
</div>

Dzięki

Źródło

2015-04-21 DasSaffe

można dodać odpowiednie kodu HTML i CSS? – Vinc199789

Hmm, to dziwne. Zmiana obrazu na suwaku powoduje, że spód staje się gładki, a po krótkim czasie staje się znowu "blokowy". –

Chociaż dobrze jest link do strony, na której możemy zobaczyć problem, czy możesz dodać tutaj odpowiedni kod? Z [strony pomocy] (http://stackoverflow.com/help/how-to-ask), _ "Jeśli możliwe jest stworzenie żywego przykładu problemu, z którym można połączyć (na przykład na http: //sqlfiddle.com/ lub http://jsbin.com/), a następnie zrób to - ale również umieść kod w swoim pytaniu, ale nie każdy może uzyskać dostęp do zewnętrznych stron, a linki mogą z czasem się zepsuć. "_ –

Można włączyć sprzętową akcelerację obrazu. Aby uruchomić tę funkcję w przeglądarce, musisz użyć dowolnej właściwości css, która jej używa.

Na przykład, dodałem transform: translateZ(0) do obróconego elementu div. Oto wyniki:

enter image description here

Źródło

2015-04-21 09:07:52

Jeśli dodać -webkit-backface-visibility: hidden; usunie antyaliasing, trochę kropce wiele rzeczy związanych z trans formularze w chromie i safari!

.slider { 
    -webkit-backface-visibility: hidden; 
}

Domyślam się, że przy próbie odwzorowania tylnej części przekształconego elementu powoduje ona w jakiś sposób problemy z działaniem Z z renderowaniem. Usunięcie tylnej powierzchni wydaje się rozwiązać ten problem. Dodatkowo, o czym wspomniały inne odpowiedzi, możesz również rozwiązać ten problem, jawnie ustawiając pozycję translacji dla osi Z z transform: translateZ(0);, co pozwala przyspieszyć sprzętowo i rozwiązać problem inną trasą.

Źródło

2015-04-21 09:07:21 RichieAHB

Zmiana transformacji na w-slide do:

transform: translateZ(0px) translateX(-1300px);

Dodanie Z perspektywa do 3D transformacji rozwiązuje ten problem.

Alternatywnie, można użyć backface-visibility: hidden; jak wspomniano w innym miejscu. W zależności od required browser support może trzeba użyć sprzedawca specyficzne prefiksy

Źródło

2015-04-21 09:07:29 SW4

Przeglądarka antyaliasing (gładkie linie)

Odpowiedz

Powiązane problemy