모달팝업을 제이쿼리로 간단히 만들었는데, 익스랑 크롬이랑 차이가 발생합니다.
본문
위 주소입니다.
인증서를 각각 클릭하면 모달로 뜨도록 간단히 제이쿼리로 만들어봤는데요..
크롬에서는 부드럽게 스스륵 뜨지만,
익스에서는 깜박거린 후 스스륵 뜹니다.
(해당 페이지를 새로 고치고 아무 인증서나 클릭하면 처음 1회때는 이상없이
부드럽게 스스륵 열리는데요. 그 레이어를 닫은 후, 같은 것을 또 다시 클릭하면
그 다음부터는 깜박거리면서 스스륵 뜹니다.
그러다, 다시 페이지를 새로고침한 후 아무거나 최초1회 클릭하면 또 역시 문제없이
스스륵~ 뜨고요..)
크롬에서는 아무런 문제가 없습니다.
익스에서만 그러네요..
(제 컴에 깔린 익스에 오류가 발생되는 건지도 모르겠습니다. )
왜 이런지 아시나요? -.-;;;;;;
답변 1
약간의 브라우저 차이일수도 있겠습니다만.. 애니메이트가 시작될때 display block부터 읽고나서 그 이후 css들이 적용됩니다.. 아마 익스에서는 그게 문제라 그런거지 않나 싶네요
html구조를 보아하니 이미지와 뒷 배경을 따로잡으셨는데.. 이렇게되면 뒷배경 애니메이트가 실행되는 시간보다 이미지의 display block이 빨리 열려서 그런거같습니다..
모달div 안에 이미지를 전부 넣지마시고 src를 변수선언해서 해당 레이어 클릭했을때 그 src를 변경하시는 순으로 하시는게 더 좋을수도 있겟다..생각해봅니다..
제 컴 익스에서 보면, 클릭할 때 순간적으로 인증서이미지가 깜빡거리면서 나타났다가 사라진 후, 다시 스스륵 나오더군요. 음...사실, 원래 의도는 검정투명 배경div가 먼저 사오면서 바로 이미지가 담긴 div가 나오는 ,,즉, 시간차 효과를 의도했습니다. 그냥, 한개의 div안에다가 넣으면 이상없이 잘 되긴 해요... 근데, 좀 스르륵 나타나는 효과가 동시에 나오다보니 평이해서, 검정 투명창 div가 일단 먼저 출발한 후 이미지가 있는 div가 나타나도록 할려고 했거든요. 암튼, 댓글에 감사드립니다. ^^
위에 설명드린거처럼..따로 잡지마시고 한군데로 잡고 하시면 그런 현상은 없을겁니다.. 어차피 display none 상태라면 뒷배경과 이미지 2개다 보이지않은 상태에서 블럭되고 overflow hidden 된상태에서 width height가 늘어가면서 보여질테니까요.
