2012-05-29 1 views
4

css3 전환이 완료되면 콜백 (callback)을 통해 내부 요소가 보입니다 (범용 선택기 및 opacity 속성 사용).css3 전환 후 내부 요소가 보이지 않는 채로 유지됨

다음과 같은 경우 화면에서 보이지 않습니다. 가장 이상한 점은 콘솔을 사용하고 "요소를 검사"할 때 마술처럼 나타납니다.

http://jsfiddle.net/tT84s/12/

이 버그는 크롬 19.0.1084.52에서 발생하지만, 사파리 5.1.5

에 내가 렌더링 버그를 의심 아니에요, 일부 내부 브라우저는 화재 또는 그런 일하지 않는 트리거합니다.

+0

버튼을 한 번 클릭하면 빨간색 테두리가 튀어 나옵니다. 그런 다음 내용을 보려면 다시 클릭해야합니다. 전환과 가시성을 동시에 발휘하려고합니까? – ledgeJumper

+0

텍스트는 상자의 크기를 조절하지 않으므로 빨간색 상자의 전환이 완료된 후 텍스트를 표시하고 싶습니다. 필요한 단계는 다음과 같습니다 : 1/빨간색 상자가 100 % 높이와 너비로 이동합니다. 2/전환 끝이 잡히고 다음 하나가 실행됩니다. 3/내부 텍스트가 나타납니다. 작동하는 것으로 보이지만 내용은 유지됩니다. 요소가 콘솔을 통해 검사 될 때까지 숨겨집니다. 그것은 마우스로 선택 가능하지만 여전히 보이지 않습니다. – challet

+0

이것은 흥미 롭습니다. Firefox에서도 작동하기 때문에 Google 크롬의 버그 일 가능성이 큽니다. – Christoph

답변

0

는 DOM이 작동하는 것 같다 흔들어

http://jsfiddle.net/tT84s/13/을보십시오. 이 피들에서는 전환하는 요소의 자식을 원래 위치에 있던 순서대로 다시 추가합니다. 그것은 바이올린에서 작동하는 것 같습니다 - 여기에 언급 된 일부 해결책은이 버그에 대한 우리의 특별한 경험을 위해 작동하지 않았습니다.

일반적으로 말해서 DOM 변경 작업이 강제 실행되는 것처럼 보입니다. 그러나 <div>을 삽입하고 제거해도 아무 효과가 없습니다. 그림을 이동! 행운을 빌어 요, 그리고 모든 사람들은이 또는 관련 fiddles/bug-demonstrations를 위해 당신의 일하는 해결책을 올리려고 노력하십시오. 예를 들어, 이것은 마지막 자식을 추가 및 제거하는 것만으로도 작동 할 수 있습니다. 필요한 것보다 많은 appendChild 액션을하지 않도록합니다.

1

-webkit-backface-visibility: hidden

웹킷 버그. 위 코드를 사용해보십시오. 문제가 도움이 될 수 있습니다. 또한 너비와 높이 대신 transform: scale()을 사용할 수도 있습니다.