본문 바로가기

웹 프론트엔드/잡다한 이슈

(6)
Safari autoplay시 영상 종료 후 볼륨 버튼을 눌렀을 때 재생되는 이슈 이슈 발생 Safari에서 의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다. 테스트 재생 완료후에 video.muted값이 변경되면 재생 된다. 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다. 해결 autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다. 아래에 테스트한 코드와 재현 영상을 첨부한다. See the Pen Safari autoplay issue by arori (@arori) on CodePen.
Safari에서 vertical-align을 통해 정렬시 정렬이 깨지는 이슈 해결 문제 상황 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인 요소의 자식 요소의 오른쪽 마진이 적용되지 않는 이슈 해결 문제 상황 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에 visible을 사용했는데 스크롤이 생기는 이슈 문제 상황 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에서 클래스 이름이 바뀔 때, 슈도 엘리먼트(pseudo element)를 redraw 하는 법. 문제 상황 IE8에서는 자바스크립트를 통해 클래스를 추가/제거하여 :before나 :after같은 슈도 엘리먼트(pseudo element) 스타일을 변경할 때 redraw하지 않는다. 원인 IE8은 contents의 값이 변경 될 때만 슈도 엘리먼트를 redraw한다. 해결 방법 항상 모든 스타일 규칙에서 다른 콘텐츠 값을 사용하면 매번 redraw가 될 것이다. .checkbox:before { content: ''; } .checkbox.checked:before { content: ' '; /*
[번역] 인터넷 익스플로러의 opacity 상속 문제 해결하기 원문: 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이 아닌 자식 요소..