Safari 절대 위치 지정 (자바 스크립트)

나는 기분에 따라 칵테일을 선택할 수있는 휠 선택기를 만들고 있습니다. 이미지 맵을 사용하고 특정 영역 위로 마우스를 가져 가면 javascript에 의해 생성 된 호버 상태가 있습니다. Chrome, Firefox 및 IE9에서 완벽하게 작동하지만 Safari와 관련된 문제가 있습니다. 절대 위치 지정이 호버 표시기에 적용되지 않는 것 같습니다. Safari 절대 위치 지정 (자바 스크립트)

여기에 직접보기 : 여기 http://thehoochlife.com/mood-selector-test/

내가 이미지 맵의 영역에 가져가 상태를 만드는 데 사용하는 자바 스크립트의 예입니다

function overStubborn() { 
indicator.css({ 
    'display' : 'block', 
    'left' : '227px', 
    'top' : '54px', 
    '-webkit-transform' : 'rotate(169deg)', 
    '-moz-transform' : 'rotate(169deg)', 
    '-ms-transform' : 'rotate(169deg)', 
    '-o-transform' : 'rotate(169deg)', 
    'transform' : 'rotate(169deg)' 
}); 
indicator.on('click', function() { 
    jQuery('#stubborn').click(); 
    return false; 
}); 
}

.indicator 요소의 CSS 입니다 :

.mood-selector .indicator { 
cursor: pointer; 
display: none; 
height: 27px; 
position: absolute; 
z-index: 100; 
}

이 .mood-selector에 position: absolute; 있습니다. Safari에서 절대 위치 지정이 작동하지 않는 이유는 무엇입니까? 도와 주셔서 미리 감사드립니다.

출처

2012-05-10 Nick Stevens

'작동하지 않는다'는 것은 무엇을 의미합니까? 정확히 무엇이 발생합니까? 제발, 더 자신을 설명하십시오 –

여기에서 작동합니다. 정말 버그가 있습니까? –

감사합니다. 내 Mac, 동료 Mac 및 Windows에서 Safari의 모든 문제를 겪고 있습니다. 마우스를 움직여 휠을 떠나지 않고 커서를 인접한 분위기로 이동하면 .indicator는 -webkit-transform에 지정된대로 회전하지만 자바 스크립트에 지정된 왼쪽 위 및 위쪽 좌표로 이동하지 않습니다. –

absolute position과 transform을 함께 사용하는 것으로 알려진 문제.

내가 사파리 같은 문제가 발생하여 크롬에 근무하고 변환하기위한 위치와 자녀 떨어져 indicator 두 가지로 요소, 부모 걸릴 수 있습니다, 또는 당신이 translateZ(0)을 추가 할 수 있습니다,이 개 솔루션을 발견 http://code.google.com/p/chromium/issues/detail?id=82225

보기 transform, 즉 '-webkit-transform' : rotate(169deg) translateZ(0)

출처

2012-10-07 01:22:21 floydwch

Safari 절대 위치 지정 (자바 스크립트)

답변

관련 문제