휴대 기기 및 데스크톱에서 작동해야하는 jQuery 라이트 박스 유형 플러그인을 작성 중입니다. 전체 화면 오버레이 효과에 문제가 있습니다. 내 연구에서,이 표준 솔루션은 position: fixed 또는 background-attachment: fixed을 사용하여 오버레이 효과를 얻는 것입니다. 물론 모바일 장치는 고정 위치 지정을 지원하지 않으므로 다른 방법을 찾으려고합니다.자바 스크립트 및 CSS 모바일 친화적 인 전체 화면 오버레이
바로 지금, 저는 새로운 크기의 창을 가져오고 오버레이를 설정하기 위해 $(window).on('resize')에 함수를 추가 할 것입니다. 내가보기에는 창의 크기를 조정할 때 깜박 거리는 스크롤 막대가 전체를 크게 움직이게하는 문제가 있습니다. 여기에서 효과를 볼 수 있습니다 (http://jsfiddle.net/dominic_p/ZqLCx/3/ 또는 http://3strandsmarketing.com/lightbox.php).
어떻게하면 해결할 수 있습니까? 코드가 여전히 무거워서 다소 혼란 스럽지만, 2 개의 문제 영역이 jsFiddle에 있다고 생각하는 것을 강조하려고했습니다. 설명문은 "THE PROBLEM: START"입니다.
UPDATE : 난 그냥 데스크톱 브라우저 fixed에 위치를 변경할 수 있지만 여전히 모바일 브라우저 내 크기 조정 스크립트에 의존하는 기발한 생각을했다. 그것은 많은 도움을 준 것으로 보이지만, 브라우저 윈도우가 작아지기 시작할 때 (특히 수직으로 축소 할 때) 여전히 중요한 깜박임이 있습니다. 또한 Android 4에서 position: fixed을 사용하면 갑자기 화면 측면에 큰 흰색 틈이 생겨 세로 모드에서만 가로로 스크롤 할 수 있습니다. 누구나 문제를 해결하는 방법에 대한 아이디어가 있습니까?
깜박임이 보이지 않습니다. –
이상합니다. 어떤 브라우저를 사용하고 있습니까? 테스트 한 일부 브라우저에서는 스크롤 막대가 표시되지 않지만 중앙에있는 내용은 깜박 거리는 것처럼 깜박 거리게됩니다. –
나는 크롬을 검사했고 ie9 –