Mentre stavo tentando di creare una figura animata (transizioni su hover), ho scoperto che lo sfondo del mio <figure> si mostra vicino ai bordi quando applico il raggio del bordo: il 50% ad esso, anche se il mio l'immagine dovrebbe occupare tutto lo spazio disponibile."bordo" frastagliato visualizzato a causa del colore di sfondo sull'elemento wrapper con raggio del bordo: 50%;
Per una demo veloce che illustra il problema, si prega di guardare http://codepen.io/anon/pen/KwMMKz
HTML
<figure>
<img src="http://placehold.it/400x400" alt>
<figcaption>Demo</figcaption>
</figure>
CSS
figure {
background-color: red;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
position: relative; /* For caption */
}
img {
border-radius: 50%; /* Forced on image for smooth transition */
width: 100%;
transition: opacity 1s ease-out;
}
figcaption {
position: absolute;
top: 100%;
left: 0;
width: 100%;
color: hotpink;
text-align: center;
transition: top 1s ease-out;
}
figure:hover img {
opacity: 0;
}
figure:hover figcaption {
top: 50%;
}
Si prega di notare: io so che l'immissione il backgroun d-color on figure: hover è un work-around, ma sono più interessato al motivo per cui questo look "border frastagliato" appare.
La mia ipotesi è che ha a che fare con il rendering AA (o qualcosa di simile) del browser e che tratta l'elemento <figure> in modo diverso da un elemento multimediale come <img>, ma non riesco a trovare alcuna prova di questo online . È un bug, è una "funzionalità" o è qualcosa che posso effettivamente risolvere?
Infine, so anche che avrei potuto usare transform: translateY(); qui per l'animazione, ma non fa parte della mia domanda quindi per favore non fornire come risposta.
UPDATE 17/12 14:03
Sembra che questo problema non è esclusivo border-radius: 50%. Il problema può verificarsi quando un elemento wrapping utilizza border-radius in combinazione con overflow: hidden, quando il wrapper contiene contenuto uguale o superiore alle dimensioni del wrapper.
UPDATE 17/12 14:14
Né l'utilizzo di overflow: hidden sull'elemento involucro, né l'uso di border-radius sull'immagine contenuta (o qualsiasi altro elemento figlio) sembrano essere la causa di questa poiché possono essere scambiati e il bordo pixelato apparirà ancora.
Questo sembra indicare che questo problema è causato unicamente dal fatto che 2 elementi DOM si trovano esattamente nella stessa posizione, quando qualsiasi tipo di raggio di bordo viene applicato all'elemento wrapper e l'area visibile del bambino è limitata a quella di i genitori.
questo sembra essere lo stesso problema di questo post: [Pixelated edge around a CSS Circle with overflow: hidden;] (http://stackoverflow.com/questions/19882283/pixelated-edge-around-a-css- cerchio-con-overflow-nascosto) –
La tua domanda sul leggerissimo (1px bordo rosso) o su quello al passaggio del mouse l'area grigia è un quadrato (mentre si dissolve) invece di un cerchio? – MMachinegun
@ web-tiki è probabilmente correlato allo stesso problema di base, ma non riesco a vedere nessuna risposta in quel post che spieghi perché sta accadendo e se si tratta di un bug o meno. Perché questo si verifica solo questo effetto pixel si verifica solo sul raggio di confine: 50% quando 2 elementi devono incontrarsi nella stessa posizione? Non riesco a pensare a nessuna buona ragione per cui questo avvenga. –