Área de elementos inconsistente seleccionable con radio de borde

jsFiddle

HTML

CSS

 body { background-color: blue; } div { background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); background-size: cover; } div, img { width: 100px; height:100px; border-radius: 50%; } 

img

Cuando se aplica un border-radius en una imagen, aún se puede hacer clic en las áreas que se redondearon. Si hace clic y arrastra el área justo fuera del círculo, verá que es posible.

div

Sin embargo, cuando aplica border-radius a un div , las áreas redondeadas no son parte del div y es realmente un círculo.


Parece que esto se aplica no solo a img sino también a object y video (gracias al comentario de web-tiki). ¿Por qué el border-radius no se aplica a estos elementos? ¿Hay algún estándar que especifique cuál es el comportamiento correcto?

¿Por qué el border-radius no se aplica a estos elementos?

Se sabe que los navegadores basados ​​en WebKit tienen problemas border-radius y han reemplazado elementos como img , object y elementos de video . No me queda claro por qué no sucede con otros elementos reemplazados, como elementos de formulario, pero los elementos reemplazados son generalmente un punto de fricción en la mayoría de los navegadores.

Históricamente, algunos navegadores no pudieron recortar visualmente el contenido, como si border-radius tuviera ningún efecto. Parece que las versiones recientes de WebKit / Blink rectifican esto, pero no completamente.

¿Hay algún estándar que especifique cuál es el comportamiento correcto?

El comportamiento correcto es que el contenido reemplazado debe recortarse por border-radius , y que cualquier evento de puntero en el área recortada no debe ser manejado por el contenido recortado. Los dos primeros párrafos de la sección 5.3 de Fondos y Fronteras indican esto muy explícitamente.

Si Chris Coyier está en lo cierto al afirmar que el contenido reemplazado está ignorando el recorte porque se está recortando el contenedor y no el contenido (que en realidad es el comportamiento esperado para los elementos no reemplazados con overflow: visible ), eso es una infracción de especificaciones. y por lo tanto puede ser considerado un error.

Una solución para esto, podría ser simple, es simplemente arrastrar al usuario: ninguna en el elemento.