아이폰(미니)에서 동영상 경계선 없애는 법

문제

모바일에서 동영상 사이 경계선이 계속 보임

 

해결

/* inline 이미지 -> block 으로 만들기 */
img {
	dispaly : block;
}

/* img 담고 있는 부모 박스에 font-size: 0선언 */
.img-box {
	font-size: 0;
}

 

원인

• inline요소는 기본적으로 font-size 스타일을 가지고 있음
• 따라서 이미지가 inline, inline-block인 경우 여백이 생기는 브라우저 이슈가 있음
• 이 때 두 가지 방법 중 택하여 사용하면 해결!
  1. img를 block 처리
  2. img의 부모 박스에 font-size: 0 처리

 

---

 

 

문제

위 방법을 써도 경계선이 보임

 

해결

/*동영상의 크기를 부모박스보다 크게 넣어서 부모 박스의 overflow:hidden 속성으로 
경계선을 가리는 방법*/

.parent { /*영상을 담고 있는 부모 태그*/
	position: relative;
	overflow:hidden;
	width: 100%;
	height:0;
	padding-bottom: (영상 높이/ 넓이);
}
video {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*경계선이 생기는 위치에 따라 넓이나 높이 값을 크게 조절*/
}

 

 

---

 

 

문제

위의 방법을 모두 사용했음에도 불구하고 아이폰 미니에서는 경계선이 계속 보임

 

 

해결

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}