CSS 전환 엉망

Question

나는 여기 CodePen이 (버그?) :

http://codepen.io/CWSpear/pen/BCriE

는 아이디어 앱이 사이드를 가지고, 당신은 수 있도록 "확장"을 클릭 할 수있는 콘텐츠 영역 전체 너비. 사이드 바를 계속 가져 오려면 '플라이 아웃'을 클릭하여 사이드 바를 콘텐츠 위에 다시 표시 할 수 있습니다. 즉, iPad의 메일 앱과 같은 세로 모드에서 플라이 아웃 옵션 만 사용할 수 있습니다.

자바 스크립트를 매우 단순하게 만들었고 모든 것이 CSS 전환으로 이루어 졌기 때문에 클래스 토글 방식을 사용했습니다.

내용 영역의 머리글/도구 모음에 폭이없고 내용 영역의 전체 너비가되어야하지만, 확장을 클릭하면 모든 것이 작동합니다. 헤더의 너비는 변경되지 않습니다.

이것은 Webkit에서만 발생합니다. "100 %"는 무엇인지 계산하는 것으로 보이며 내용의 패딩을 변경하더라도 (상자 크기로 인해 내용이 넓어 짐) 헤더가 동일한 너비를 유지합니다. 돌아 오는 길에 그 반대가되는 것 같습니다. 확장을 클릭하면 (일반적으로 축소라고 생각할 것입니다) 다시 헤더가 전체 너비가되지만 내용에 여백이 추가되면 너비를 다시 조정하지 않으며 이제 헤더가 내용이 너무 넓습니다. 확장

클릭에 당신이 얻을 :

하기 전에 :

나에게 설명하자

그것은 파이어 폭스에서 잘 작동 : 여기

가 예상되는거야 . 또한 창 크기를 수동으로 조정하면 영역을 다시 채우고 머리글을 수정한다는 점에 유의해야합니다 (실제로 "예상"스크린 샷이있는 방법입니다). JavaScript로 크기 조절을 트리거하는 것은 작동하지 않는 것 같습니다. (다시 그리기를 트리거하지 않는다고 생각하기 때문입니다.)

명시 적으로 '100 %'너비 및 기타 JavaScript 트릭을 설정하고 해킹없이 헤더에 백분율 너비를 설정하려고 시도했습니다.

누구도이 문제를 겪었거나 수정 사항이 있습니까?

Safari 6.0.1 및 Chrome 22.0.1229.79에서 깨졌으며 Firefox 15.0.1에서 작동했습니다. 챔피언처럼, 파이어 폭스.

[업데이트] 은 애런 마진로 전환하여 문제를 해결할 수 있었다로만, 패딩과 관련이있을 것으로 보인다. 콘텐츠의 너비가 자동이기 때문에 효과가 있습니다. 너비가 100 %이면, 깨뜨릴 것입니다. 그 여기의

데모 : 내가 요소에 width: 100%를 넣을 때까지 http://codepen.io/CWSpear/pen/uvFJh

마진이 좋은 연극은, 그것은 심지어 box-sizing: border-box에, 상자 밖으로 나옵니다.

어떤 이유에서인지 정확히 display: block이지만 width: auto으로 설정하면 실제 작업중인 프로젝트가 완전히 축소됩니다.나는 그것을 재현하고 그것을 위해 CodePen을 게시하려고 노력 중이다.

사실 웹킷 버그입니까? 다른 대안이 있습니까?

Answer 1

http://codepen.io/anon/pen/fzrkm

나는 margin-left에 padding-left 업데이트되었습니다 이것은 크롬과 파이어 폭스에서 치료를 작동하는 것 같다.

나는 이것이 당신의 버그를 수정하는 이유에 대해 더 자세히 알려주기를 바랍니다.

Answer 2

나는 최근에 같은 문제가있었습니다.

당신이 말했듯이, 나는 패딩 대신 여백을 사용해야했습니다. 적어도 알려진 문제입니다. https://bugs.webkit.org/show_bug.cgi?id=93876