잡다한 개발 블로그

문제 상황 IE 10에서 video tag를 사용하여 동영상을 노출 시켰을 때, Invalid Source 라고 노출되며 재생 불가 해당 비디오는 서버에서 MIME type "application/octet-stream" 으로 내려주고 있었음 MIME type: application/octet-stream 이란 application/octet-stream 는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다. 출처: MDN - MIME 타입의 전체 목록 해결 방안 서버에서 비디오의 MIME type을 video/mp4로 반환하도록 변경. 참고 링크 HTM..

이슈 발생 Safari에서 의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다. 테스트 재생 완료후에 video.muted값이 변경되면 재생 된다. 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다. 해결 autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다. 아래에 테스트한 코드와 재현 영상을 첨부한다. See the Pen Safari autoplay issue by arori (@arori) on CodePen.

문제 상황 Safari(Mac, iOS)에서 vertical-align: top이 적용된 block 엘리먼트 안에 엘리먼트와 다른 엘리먼트가 있으면 다른 엘리먼트가 하단으로 떨어져서 정렬이 깨지는 현상이 발생했다. See the Pen Safari(iOS, Mac) vertical-align broken by arori (@arori) on CodePen. 위 코드를 Safari에서 실행시키면 아래와 같이 노출된다. 실험 공식 문서에 따르면 vertical-align 은 inline 요소와 table-cell 요소에만 적용되며, 상속 되지 않는 속성이다. 그러면 위 코드를 기준으로보면 inline-block인 wrapper에 vertical-align을 줘도 내부 요소의(텍스트 노드와 엘리먼트) 정렬은 ..

문제 상황 overflow-x:scroll인 요소의 자식 요소의 오른쪽 마진이 적용되지 않아 스크롤이 안 생기거나, 더 짧게 생기는 현상이 발생한다. See the Pen Margin right not working inside Overflow-x:scroll Element by arori (@arori) on CodePen. 원인 공식 문서에 따르면 블록 레벨 요소에서 direction이 ltr이고, 자식이 margin, border, padding, width를 포함하여 부모를 넘는다면 margin-right가 무시된다. 문제 상황처럼 꼭 overflow-x: scroll이 아니더라도 발생할 수 있다. 10.3.3 normal flow에서 block-level, non-replaced 요소 다른 프로..

문제 상황 overflow-x, overflow-y를 이용하여 x 와 y에 각각 속성을 주었을 때, visible을 사용했음에도 x 혹은 y에 스크롤이 생기는 현상이 발생한다. 원인 visible과 visible이 아닌 다른 속성(hidden, auto, scroll)을 함께 사용할 경우에 visible인 쪽이 auto가 된다. 해당 내용은 W3C의 공식 스펙에도 기재되어있다. The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visib..

문제 상황 IE8에서는 자바스크립트를 통해 클래스를 추가/제거하여 :before나 :after같은 슈도 엘리먼트(pseudo element) 스타일을 변경할 때 redraw하지 않는다. 원인 IE8은 contents의 값이 변경 될 때만 슈도 엘리먼트를 redraw한다. 해결 방법 항상 모든 스타일 규칙에서 다른 콘텐츠 값을 사용하면 매번 redraw가 될 것이다. .checkbox:before { content: ''; } .checkbox.checked:before { content: ' '; /*

원문: Fixing IE's Opacity Inheritance Fixing IE's Opacity Inheritance Fixing IE's Opacity Inheritance Child elements ignore the parent's opacity in Internet Explorer. January 17, 2012 In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. All of this text should have a 50% opacity.. www.jacklmoore.com Internet Explorer 7, 8, 9에서 position이 static이 아닌 자식 요소..