Firefox가 강제로 비디오 요소를 다시 그려야합니까?

Question

jQuery를 사용하여 자동으로 화면 중앙에 배치되는 동적 HTML 팝업 윈도우 (절대 위치 div)를 개발 중입니다. 또한 창 화면의 크기에 적합한 내용을 수용 할 수도 있습니다.

아이디어는 고객이 제품 목록 옆에있는 "더 많은 내용을 읽음"링크를 클릭 한 다음이 팝업 창이 나타나 판매 편지를 표시한다는 아이디어입니다. 각 판매 편지에는 제품을 자세히 설명하는 비디오가 포함되어 있습니다.

팝업 창은 창에서 닫기 버튼을 클릭하거나 창 밖에서 클릭하여 해제 될 때까지 화면 중앙에 유지됩니다. 사용자가 스크롤하는 위치와 창 크기를 조정할 때 절대 위치 지정을 조정하여 중앙에 유지됩니다.

내 문제는 video 요소에 있습니다. Firefox (모든 것)를 제외한 다른 모든 브라우저에서는 사용자가 문서를 스크롤하거나 비디오의 크기를 조정할 때 비디오가 팝업 창 내에서 완벽하게 렌더링됩니다. 그러나 파이어 폭스에서는 사용자가 스크롤/크기를 조정하고 팝업창이 절대 위치를 조정할 때 비디오는 원래 있던 위치에서부터 현재 위치 또는 비디오 화면이 투명하게 변하는 것처럼 보입니다.

어쩌면 파이어 폭스가 비디오 화면을 다시 그려야 할 필요가 있다고 생각했습니다. 나는 이것을 달성하기 위해 몇 가지 다른 방법을 시도했다. 요소를 사라지게하고 재 빠르게 나타나게하는 것만으로는 작업을 수행하지 않는 것 같습니다. 그러나 마진이나 위치를 신속하게 조정하면 효과가있는 것으로 보입니다.

처음에는이 해결책을 찾아야했습니다. 그러나 다른 브라우저에서 테스트를 시작하면서이 "흔들림"동작으로 인해 브라우저가 느려진 것 같았습니다. 특히 Chrome에서 발견했는데 (아직 다른 브라우저에서는 테스트하지 않았습니다).

이 픽스를 Firefox로 제한하려고 생각했지만 jQuery의 브라우저 데이터 필드는 1.3에서 사용되지 않습니다. 항상 자바 스크립트를 만들어 브라우저를 식별 할 수는 있지만 브라우저에서 비디오 요소를 다시 그리는 것이 더 좋은 방법인지 궁금합니다. 아니면 잘못된 트랙에있어 다시 그릴 필요가 없습니다.

나는 파이어 폭스 3.0.1, 크롬 1.0.154.48, Internet Explorer 7 및 사파리를 사용하고 있습니다 3. 모든 입력을 감상 할 수있다

: 여기 wiggleVids 기능에 대한 코드입니다 :

이 ** 업데이트 : 코드를 변경하여 삽입 된 요소가 윈도우 스크롤 기능에 바인딩하는 대신 팝업 상자의 위치가 변경된 경우에만 흔들립니다. 크롬의 실행이 조금 빨라졌지만 여전히 아직은 그렇지 않습니다. 그것의 아직도 현저한 지체.

** 업데이트 2 : Lee의 제안에 따라 팝업 창에 삽입 된 비디오가 배열에 저장되도록 코드를 변경했습니다. 이런 식으로이 함수가 실행되면 브라우저는 임베드 된 객체에 대해 DOM을 계속해서 검색 할 필요가 없습니다. myVids는 전역 적으로 선언되고 팝업이 닫힐 때 지워집니다.

function wiggleVids3() { 
    if (myVids.length <= 0) { 
     $('#popup embed').each(function(ctr) { myVids[ctr] = $(this); }); 
    } 

    if (myVids.length > 0) { 
     for(var ctr = 0; ctr < myVids.length; ctr++) { 
      var myObj = myVids[ctr]; 
      var temp = myObj.css("margin-top"); 
      var suffix = temp.substr(temp.length - 2,temp.length); 
      var currentMargin = ((suffix == 'px') || (suffix == 'em')) ? parseInt(temp.substr(0, temp.length - 2)) : parseInt(temp); 
      var newMargin = currentMargin + 2; 
      myObj.css('margin-top', newMargin + 'px'); 
      setTimeout(function(){ myObj.css('margin-top', currentMargin); }, 1); 
     } 
    } 
} 

Answer 1

JQuery와이를 지원하지 않더라도, 나는 각 브라우저에 대해 서로 다른 코드를 사용하면 더 나을 것 같아요, 또는 단지 특별한 파이어 폭스 코드를 '가능'파이어 폭스 브라우저가 감지되었을 때. 그것은 작은 일로 당신의 문제를 해결할 수있는 것처럼 보입니다.@ 아담이 말에

-Adam

Answer 2

건물,

를 사용하여 HTML을 생성하는 유사한 인터페이스를 가진 개체를 만들 Factory Pattern와 결합 된 Strategy Pattern을, 당신은 각각의 브라우저를 만들 수 있습니다 그것은 다르게 행동합니다.

아, 그리고 공장에서 모든 브라우저 감지를 수행하고 개체를 설정합니다. 당신이 그것을 검색하는 대신 배열에 $ ('# 팝업 삽입')를 저장하는 경우

• how-does-the-strategy-pattern-work