Question

我正在处理使用CSS3动画的site。

我在iOS上注意到漫画字幕“跳转”，我认为这是由地址栏更改用于计算字幕位置的window properties之一引起的。

源代码可在此处获取：https://gitlab.com/ashleyconnor/adventurersclubcomic

如果我的假设是正确的。是否有一种准确的方法来抵消iOS地址栏，这样任何值都没有跳跃（突然增加）？

Answer 1

我克隆了您的回购，并且能够在Firefox和Chrome中重现窗口大小调整的抖动。在调试几分钟之后，我认为问题实际上在你的index.js文件中。

每次窗口调整大小时，您都会完全刷新enllax插件。这似乎是不必要的。

如果您删除对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'));
});

通过该更新，在我安装的所有浏览器中调整大小时抖动停止。它还有待在iOS上测试，因为我没有任何Apple硬件可以测试它，但我怀疑它应该也可以解决这个问题。

iOS上的垂直滚动动画“跳跃”

1 个答案: