Anti-alias del browser (linee smussate)

Nel mio dispositivo di scorrimento, ho il problema, che una volta terminato il mio effetto dissolvenza, una parte del mio contenitore ruotato sembra un gradino. Posso fornire un esempio qui:Anti-alias del browser (linee smussate)

http://lamit.webflow.com

Come si può vedere nel cursore, durante l'effetto, il fondo del mio testo-bar è liscia. Tuttavia, dopo la transizione, sembra strano.

Qualche idea su come liberarsene?

Aggiornamento

Dal momento che questo sito è fatto in webflow, ci sono alcuni CSS-errori durante l'analisi del codice (a causa di alcuni prevenzioni da webflow).

Il codice in questione è qui sotto:

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>

Grazie

fonte

2015-04-21 DasSaffe

è possibile aggiungere un po 'di codice html e css rilevante? – Vinc199789

Hmm, è strano. Cambiando l'immagine sul cursore, il fondo diventa liscio e dopo un breve ritardo diventa nuovamente "di blocco". –

Mentre è utile collegare a una pagina in cui possiamo vedere il problema, puoi aggiungere qui il codice pertinente? Dalla [pagina di aiuto] (http://stackoverflow.com/help/how-to-ask), _ "Se è possibile creare un esempio dal vivo del problema a cui è possibile collegarsi (ad esempio, su http: //sqlfiddle.com/ o http://jsbin.com/) quindi, ma includi anche il codice nella domanda stessa. Non tutti possono accedere a siti esterni e i collegamenti potrebbero interrompersi nel tempo. "_ –

È possibile attivare il rendering con accelerazione hardware. Per attivare quello nel browser, è necessario utilizzare qualsiasi proprietà CSS che lo utilizza.

Ad esempio, ho aggiunto transform: translateZ(0) all'elemento div ruotato. Ecco i risultati:

enter image description here

fonte

2015-04-21 09:07:52

Se si aggiunge -webkit-backface-visibility: hidden; che rimuoverà l'antialiasing, un po 'di una correzione per molte cose da fare con trans forme in cromo e safari!

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

La mia ipotesi è che quando si cerca di rendere la faccia posteriore di un elemento di trasformazione che provoca problemi di Z-fighting con il rendering in qualche modo. Rimozione del backface sembra risolvere questo.

Inoltre, come altre risposte hanno menzionato, è possibile risolvere anche impostando esplicitamente la posizione di traslazione per l'asse z con transform: translateZ(0);, che consente l'accelerazione hardware per avviare e risolvere il problema tramite una rotta diversa.

fonte

2015-04-21 09:07:21 RichieAHB

Modifica la trasformazione su w-slide a:

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

Aggiunta di un z-prospettiva alla trasforma 3d risolve il problema.

In alternativa, è possibile utilizzare backface-visibility: hidden; come indicato altrove. A seconda del tuo required browser support potresti dover utilizzare prefissi specifici del fornitore

fonte

2015-04-21 09:07:29 SW4

Anti-alias del browser (linee smussate)

risposta

Problemi correlati