CSS3 불투명도 전환 문제

CSS3 전환이 포함 된 사이트에서 작업 중이므로 약간의 장애가 있습니다.CSS3 불투명도 전환 문제

내가 적용한 요소 위로 마우스를 가져 가면 이전 div의 텍스트가 흐려지고 전환이 완료되면 정상으로 돌아갑니다. 크롬과 사파리에서는 잘 작동하지만 파이어 폭스에서는 문제가 발생합니다.

내가 여기에 문제가 재현했습니다 http://jsfiddle.net/fkbc6/

의 전환이 현재 분명히 작동하지 않습니다 목록 항목에 적용됩니다. 나는 또한 그것을 이미지에 적용 해 보았지만 아무 소용이 없었다.

나는 모든 아이디어가 없으므로 도움이 될 것입니다.

2012-04-19 carlh

실수는 스타일 (2 회 BTW CSS를 적용하기 때문에 당신이 적용 된 CSS 0.5 부정도의 변환 (무엇 purpouse에?)와 파이어 폭스가 다시 이상한 방법으로 모든 글꼴을 렌더링하고 있었다 와우, 사실 두를 적용했다 :)는

가

#wepartner { 
    overflow:auto; 
    margin:70px auto 70px auto; 
    padding-top:80px; 
    background:#F6F6F6; 
    background:rgba(0,0,0,0.02); 
    padding:80px 50px 50px 50px; 
    -moz-transform:rotate(0.5deg); 
    -webkit-transform:rotate(0.5deg); 
    -o-transform:rotate(0.5deg); 
    -ms-transform:rotate(0.5deg); 
    transform:rotate(0.5deg) 
} 
#wepartner .content { 
    -moz-transform:rotate(-0.5deg); 
    -webkit-transform:rotate(-0.5deg); 
    -o-transform:rotate(-0.5deg); 
    -ms-transform:rotate(-0.5deg); 
    transform:rotate(-0.5deg) 
}

일단 제거 모든 것이 잘

편집 작동합니다 예제의 상단에 div가 있었다 같은 값과 다른 방향으로 회전은, Ctrl-C를 Ctrl 키-V와주의 : P

편집 2 :이 링크가 당신에게 도움이 될 수있다 http://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/

출처

2012-04-19 13:46:21

안녕하세요 데이비드, 당신의 도움을 위해 건배. 양수 회전은 스타일 구분 목적으로 만 상위 div (#wepartner)에 적용되었습니다. 자식 div (.content)의 음수 회전은 톱니 모양의 인공물 (원래 회전 중에 발생했던)을 조정하고 텍스트와 이미지를 원래 방향으로 되돌려 놓는 것이 었습니다. 나는 이것이이 문제를 해결하는 것을 보았으나 어쨌든이 문제없이 div의 순환을 유지할 것인가? – carlh

CSS에 요소를 적용 할 때 요소에 CSS를 적용합니다. 0deg를 .content 변환에 적용하려했는데, 음수는 컨 테터 레이션하지 않고 똑바로 div에 음의 순환을 추가하는 것처럼 행동하기 때문입니다. 또한 변환에 none 값을 넣으려고 시도했지만 작동하지 않습니다. 더 많은 정보 : https://developer.mozilla.org/ko/CSS/transform 방금 내 대답을 편집하여 새 링크를 추가했습니다. http://petermolnar.eu/linux-tech-coding/ie8-css-filter -matrix-cleartype-font-bug-fix/ –

링크 David에게 감사드립니다. 두려워서 나는 아직도 그걸 작동시킬 수 없다. 부모에게 하나의 변형을 추가하고 자식에게는 아무것도주지 않더라도, 나는 여전히 호버 동안 렌더링 문제를 얻는 것처럼 보인다. 이 가능성이 브라우저 버그일까요, 아니면 제 CSS에서 뭔가를 일으킬 수 있습니까? – carlh

CSS3 불투명도 전환 문제

답변

관련 문제