Chrome & video & border-radius

Давно не писала ничего в блоге, а материала и заметок накопилось достаточно. Этот пост будет супер-коротким!
При верстке выявился такой баг в браузере Google Chrome — если тег video поместить в контейнер, которому задать некоторый border-radius и overflow: hidden, то получим, что overflow ни разу не hidden, и уголки видео будут портить всю картину. Для победы достаточно добавить такой кусочек кода:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
-webkit-transform: rotate(0.000001deg); 
-webkit-border-radius: 10px;

Комментарии

Популярные сообщения