2012-04-28 5 views
4

그래서 저는 뷰포트로 작은 div를 사용하고 뷰포트를 통해 볼 수있는 내용으로 더 큰 div를 사용하는 기술을 사용하여 만든 가짜 작은 iOS 5 스타일 스위치가 있습니다. 오버 플로우를 숨겨지는 것으로 계산할 때 어떤 자식 요소에 정적 세트 이외의 위치로 테두리 반지름을 존중하지 않기 때문에 웹킷에서는 완전히 실패했습니다.CSS 위치, 테두리 반경, 오버플로가 webkit에서 존중되지 않음 - 다른 솔루션?

  1. 왜 웹킷은 아직 버그로 확인되지 않았습니다

    Original effort on jsfiddle

    Solution on jsfiddle

    정말, 나는 3 일을 궁금하네요? (https://bugs.webkit.org/show_bug.cgi?id=72619)

  2. 사람들이 알고있는이 버그에 대한 다른 해결 방법이 있습니까? 특히 내가 설명한 뷰포트 기술에 대한 것입니까?
  3. 더 많은 sidenote가 있습니다. 뷰포트 기술에는 실제 공식 이름이 있습니까?
+0

내가 일에 대해 잘 모르겠지만, 그것은 확실히 버그 : 그것은 확실히 나에게 striahgtforward 보였다. CSS 스펙은 border-radius가 오버 플로우 클리핑의 포인트 인 패딩 엣지를 변경한다는 것을 명시 적으로 나타냅니다. 내가 생각할 수있는 유일한 다른 기술은 부분 투명 이미지를 사용하는 자식 요소를 조잡한 클리핑 마스크로 사용하도록 추가하는 것입니다. 따라서 스위치 '홀더'는 실제로 자식입니다. 하지만 좋은 해결책은 아닙니다. –

+0

테스트 용 코드를 복사하여 붙여 넣었으며 Google 크롬으로 localhost에서 실행했습니다. 나는 warm div의 시작 부분에 위치한 warm와 cold 사이의 원을 제외하고 정확히 실행되는 이유를 알 수 없습니다. – Stencil

답변

관련 문제