Firefox 3.6에서 CSS3 Transform이 안정적입니까?

이미지의 크기와 위치를 변환 한 CSS3 변환을 구현했습니다. 이미지 위로 마우스를 가져 가면 결과 이미지가 때때로 깜박이거나 나타나지 않습니다. 마우스를 조금 움직여서 붙잡아 야합니다. 파이어 폭스 3.6에서 제 코드 나 구현에 문제가 있습니까?Firefox 3.6에서 CSS3 Transform이 안정적입니까?

HTML :

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

CSS : http://www.amcolan.info/Rowe/rowe.php :

.image-transform img 
{ 
    float:right; 
    width: 75px; 
    background-color: #ffffff; 
    margin: 1em 1em 1em 1em; 
    padding: 3px; 
    border: solid 1px; 
    -moz-box-shadow: 5px 5px 5px #888; 
    -o-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
.image-transform:hover img 
{ 
/* width: 300px;*/ 
    -moz-transform: scale(4) translate(-60px); 
    -webkit-transform: scale(4) translate(-60px); 
    -o-transform: scale(4) translate(-60px); 
    transform: scale(4) translate(-60px); 
}

이 생산 페이지에 있습니다. 오른쪽 여백에있는 유일한 작은 사진입니다. 잘 작동하는 다른 페이지에서 자바 스크립트 솔루션을 사용했지만 CSS3를 사용해 보았습니다.

도움 주셔서 감사합니다.

출처

2011-03-20 curt

질문에 대한 귀하의 의견에 따라 : 두 번째 코드 블록이 수정되었습니다. [네 개의 공백으로 코드 들여 쓰기] (http://stackoverflow.com/editing-help)해야합니다. 텍스트를 선택하고'{}'버튼을 클릭하면됩니다. – thirtydot

또한 링크가 끊어졌습니다. – thirtydot

고쳐 주셔서 감사합니다. 나는 당신도 링크를 고정 가정합니다. 그것은 나를 위해 일했습니다. – curt

이유는 실제로 매우 간단합니다. 당신이 요소 위에 마우스를 올려 때 :hover 선택이 적용됩니다, 그것은 때문에 멀리 마우스에서 이동, 확장 및 변환,

The end and start point of the animation overlayed over each other

참조 :이 이미지에서보세요. 요소가 이고 마우스 아래에이 아니므로 :hover 선택기가 적용되지 않고 요소가 마우스 아래의 원래 위치로 다시 이동합니다. 그러면주기가 반복됩니다.

이제 CSS 전환은 Firefox 3.6에서 지원되지 않으므로 브라우저가 화면을 다시 칠하는 순간 즉각적으로 발생하므로 '깜박임'또는 '깜박임'으로 나타납니다.

해결 방법은 애니메이션의 모든 부분에서 요소 아래에 항상 마우스가 있는지 확인하거나, 이벤트 및 큐를 사용하여 애니메이션을보다 세부적으로 제어 할 수있는 JavaScript를 사용하는 것입니다.

출처

2011-03-20 07:57:26

깜박임을 멈추지 않으면 설명을 이해할 수 있습니다. 원본 이미지 위로 마우스 포인터를 천천히 이동하여 멈출 수 있습니다. 이 시점에서 포인터는 이미지의 위치를 가리키고 있습니다. – curt

그럼에도 불구하고 확대 된 이미지가 원본 위에 남아 안정적 이도록 변환을 변경했습니다. 그래서 결국 당신은 나에게 해결책을 주었다. – curt

Firefox 3.6에서 CSS3 Transform이 안정적입니까?

답변

관련 문제