CSS3 변형, 레이어 및 진단

Question

저는 최근에 CSS3에서 새로운 3D 효과 변환을 사용하는 마이크로 사이트를 개발했습니다. 그러나, 나는 약간의 복잡한 환상이 효과를 발휘할 수 있도록 레이어링을 너무 까다롭게하려고 노력해 왔으며 수많은 두통의 원인이었습니다 ...

일반적으로 Chrome에는이 문제가 있습니다 (하지만 Firefox, 모든 것이 "화면 상에 적절하게"렌더링되는 것처럼 보이는 Safari 나 IE는 아직 시도하지 않았다. 그러나 링크를 클릭하거나 더 까다로운 레이어 중 하나에서 텍스트를 강조 표시 할 때, 어떤 기능을 얻을 수 없습니다. 나는 모든 것이 잘 보일 수있다. 그것은 설명을 돕는 경우, 커서가 상호 작용하는 것을 막는 보이지 않는 벽이있다.

1 마일 길이의 실험 코드를 붙여 넣지 않고서도이 문제의 원인이 될 수있는 머리를 아는 사람이 있습니까? 내 최고의 추측은 Z- 인덱스 상속이 어느 시점에서 잘못되었지만 진단하기가 어렵다는 것입니다. 진단을 겹겹이 쌓기위한 좋은 전략을 아는 사람이 있는지 여부에 대한 다음 질문으로 이끄는 것입니다 (도구는 여기에서도 훌륭합니다).)!

나는 물론 파이어 버그/표준 개발자 도구에 정통한거야 ...

고마워!

Answer 1

좋아, 나는 ... 서로 방해 할 수있는 모든 요소의

1. 확인 신중 Z - 인덱스 값을 내 문제를 해결하고 진단 레이어링 문제에 나중에 참조 할 수 있도록 다음과 같은 전략을 내놓았다 . 필요한 경우 다시 정렬하고 문제가 해결되는지 확인하십시오. 그렇지 않다면 계속 진행하십시오.
2. 1 단계의 모든 요소에서 신중한 위치를 확인하십시오. CSS 마크 업에서 "position : absolute"또는 "position : relative"중 하나를 갖도록 선언되었는지 확인하십시오. 상습/기본값에 의존하지 마십시오. 절대 선언이 중요합니다.
3. "뒷면 표시 여부"값을 확인하십시오. 설정이 복잡하면 무엇이 무엇인지 추적하기가 쉽습니다.

그 패턴은 마침내 나를 위해 그것을했다. 내 문제는 모두 3의 조합으로 밝혀졌지만 위의 단계를 수행하기 전까지는 나에게 자신을 드러내지 않았습니다.