Safari에서 CSS 전환 및 고정 위치 지정

Question

Safari에서만 발생하는 웹 사이트에 몇 가지 문제가 있습니다. Mac에서 버전 5.1.7 (7534.57.2)을 실행 중입니다.

여기에서 사이트를 볼 수 있습니다 : http://mcad.edu/annual-report-2011-12/.

웹 사이트 인 상대 위치 결정 된 콘텐츠 모두 상단 고정과 고정 시차 배경 용기 내에서 0

로 설정 왼쪽 3 개 시차 스크롤 배경을 포함하여 모든 것을 보유하고 사업부, 색상 화와 시차 스크롤, 사용자가 마우스를 올려 놓으면 이미지가 풀 컬러 이미지로 변합니다. 각 "이미지"에는 두 개의 div가 겹쳐져 있으며 각각 배경 위치에 의해 배치 된 배경 이미지가 있습니다. 하단의 div에는 색상이 지정된 이미지가 있습니다. 맨 위에있는 div는 풀 컬러 이미지를 배경으로하며 마우스 오버 때까지 불투명도를 0으로 설정합니다. 페이드는 불투명도 속성의 CSS 전환을 사용하여 최상위 div가 표시되도록합니다.

Safari에서만 이러한 div 중 하나 위에 마우스를 올리면 전환이 원활하게 수행되지만 동일한 시차 스크롤 배경 div에있는 모든 콘텐츠가 프로세스에서 이동/점프합니다. CSS 전환을 제거하면 발생하지 않습니다.

사파리의 고정 위치 컨테이너와 잘 어울리지 않는 전환/웹킷 전환 속성과 관련이 있다고 생각합니다. 그러나 내가 발견 한 모든 문제는 2010 년에 나온 것으로 2 년 후 내가 정한 Safari 버그가 수정되었습니다. 하지만 그렇지 않을 수도 있습니다.

촉매 섹션에는 다른 문제가 있습니다 (오른쪽 탐색의 세 번째 점 아래). 이러한 애니메이션 이미지는 Chrome, Firefox, Opera에서 링크로 작동하지만 Safari에서는 작동하지 않습니다. 어떤 아이디어?

Answer 1

내가 만든 헤더 메뉴의 고정 위치 및 전환 지속 시간과 비슷한 문제가 있습니다. 방문자가 아래로 스크롤하면 메뉴의 상자 그림자가 사라집니다. MacOS에서 사파리로 볼 때, 나는 이상하게 여겨진다. 쉽게이 문제를 해결하기 위해 많은 시간을 들여 답변을 검색 한 후 Mac 용 전환 효과를 제거합니다. 이것은 문제의 슬라이드를 수정하지만 슬프게도 전환 효과를 제거합니다.

당신이 추측했듯이 프로젝트의 전환 지속 시간 일 수도 있습니다. 가장 좋은 방법은 아마도 Mac-Safari CSS 파일을 만들고 해당 특정 영역의 전환 기간을 없애고 프로젝트를 진행하는 것입니다.

나는 지금 제안 할 수있다. 희망이 도움이됩니다.