iOS에서 수직 스크롤 애니메이션 'jumps'

Question

저는 CSS3 애니메이션을 사용하는 site에서 작업 중입니다.

iOS에서 캡션 위치를 계산하는 데 사용되는 window properties 중 하나를 변경하는 주소 표시 줄로 인해 발생한다고 생각하는 만화 캡션 '점프'가 나타났습니다.

소스 코드는 여기에 있습니다 :

내 가정에서 올바른 해요 경우 https://gitlab.com/ashleyconnor/adventurersclubcomic. iOS 주소 표시 줄을 상쇄하는 정확한 방법이 있으므로이 값 중 어느 것에도 점프 (갑자기 증가)가 없습니까?

Answer 1

repo를 복제하여 Firefox 및 Chrome에서 창의 크기 조정시 지터를 재현 할 수있었습니다. 몇 분의 디버그 후, 문제는 실제로 index.js 파일에 있다고 생각합니다.

창 크기가 조정될 때마다 enluax 플러그인이 완전히 새로 고쳐집니다. 이것은 불필요한 것으로 보인다. 이 같은 enllax 함수에 과도한 호출을 제거하면

: 그 업데이트에서

$(document).ready(function() { 
// function enllax() { 
    $('#start').enllax({ 
     type: 'foreground', 
     ratio: 0.5, 
     direction: 'vertical' 
    }); 
// $(window).scroll(); 
// }; 

    $('#begin').click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#panel1").offset().top 
     }, 1000); 
    }); 

// enllax(); 

    // And trigger the scroll event on resize to deal with changes 
    // in the responsive layout 
    $(window).on('resize', $(window).trigger('scroll')); 
}); 

을, 지터는 내가 설치 한 모든 브라우저에서 크기 조정을 중지합니다. 테스트 할 Apple 하드웨어가 없기 때문에 iOS에서 테스트를 계속해야하지만 문제도 해결해야한다고 생각합니다.