当前位置: 首页 > 面试题库 >

iPad Safari滚动导致HTML元素消失并延迟出现

商天逸
2023-03-14
问题内容

我目前正在使用html5和jQuery开发用于iPad
Safari的网络应用。我遇到了一个问题,其中较大的滚动区域会导致向下滚动时在延迟后出现屏幕外的元素。

我的意思是,如果我有一排不在屏幕上的图像(甚至是带有渐变的div),则向下(或向上)滚动到该图像时, 预期的行为
是该元素在屏幕上显示为我正在滚动到它。

但是,我看到的是,直到我将手指从屏幕上移开并且滚动器完成了所有动画之后,该元素 才出现

这给我造成了一个非常明显的问题,尽管看起来并非如此,但整个事情看起来却很不稳定。我猜想iPad
Safari正在尝试做一些事情来节省内存。有什么方法可以防止这种不连贯现象的发生。此外,如果有人能阐明iPad Safari的实际用途,我也将不胜感激。


问题答案:

这是我的问题的完整答案。 我最初将@Colin Williams的答案标记为正确的答案,因为它帮助我获得了完整的解决方案。在我问了大约2.5年后,@
Slipp D.
Thompson的一个社区成员编辑了我的问题,并告诉我我正在滥用SO的Q&A格式。他还告诉我将其单独发布作为答案。因此,这是解决我的问题的完整答案:

@科林·威廉姆斯,谢谢!您的答案和您链接的文章给了我引导,尝试使用CSS。

因此,我之前使用过translate3d。它产生了不良的结果。基本上,它将剔除屏幕上的元素,并且不进行渲染,直到我与它们进行交互为止。因此,基本上,从横向看,没有显示我的一半不在屏幕上的网站。这是一个iPad
Web应用程序,由于我已修复。

将translate3d应用于相对定位的元素可以解决这些元素的问题,但是一旦离开屏幕,其他元素就会停止渲染。我无法与之交互的元素(图稿)将永远不会再次呈现,除非重新加载页面。

完整的解决方案:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

现在,尽管这可能不是最“有效”的解决方案,但它是唯一可行的解​​决方案。使用时,Mobile
Safari不会渲染屏幕外的元素,有时甚至无法正常渲染-webkit-overflow-scrolling: touch。除非将translate3d应用于由于该滚动而可能会在屏幕外显示的所有其他元素,否则这些元素将在滚动后被切掉。

因此,再次感谢,希望这对其他迷路者有所帮助。这无疑帮助了我很多时间!



 类似资料:
  • 问题内容: 我目前正在使用HTML5和jQuery开发针对iPad Safari的网络应用。我遇到了一个问题,其中较大的滚动区域会导致在向下滚动时,屏幕上的元素在延迟后出现。 我的意思是,如果我有一排不在屏幕上的图像(甚至是带有渐变的div),则当我向下(或向上)滚动到该图像时, 预期的行为 是该元素在屏幕上显示为我正在滚动到它。 但是,我看到的是,直到我将手指从屏幕上移开并且滚动器完成了所有动画

  • 问题内容: 我有一个div“框”,当用户滚动到下一页时,它会逐渐使用“ .fp-viewing”作为锚点淡入淡出以开始过渡效果。问题是,当触发.fp- viewing时,页面开始滚动,并且在动画结束之前将框滚动出视图。 触发.fp-viewing时,如何延迟滚动开始,直到box在4s内完成动画播放? 问题答案: 您可以使用fullpage.js提供的选项来取消运动。

  • 我使用recyclerview来显示项目,项目大小可以是0 - 500。 但它的滚动性能非常慢,有时它会滞后/停止视图1~2秒。我想在回收器视图中获得流畅的滚动体验。 即使我从我用Glide加载的cardview布局中删除了图像,对性能没有影响。 fragment_home.xml 我的卡片视图布局文件 onBindViewHolder 方法从我的适配器 calss

  • 描述 我有一个小应用程序,它使用hook更新状态,但每次更新时,都会导致页面延迟。我指的是实际的延迟,而不仅仅是“等待异步”延迟。 我的理论是,更新状态会重新呈现太多的组件,因为如果我将状态减少到更少的值,滞后就会消失。 从本质上说,我担心我更新状态的方式没有隔离我想要的值。 密码 我将回购加载到CodeSandbox:https://codesandbox.io/s/long-forest-y9

  • 我有以下实体结构: 因此,我在每个实体类的顶部定义了以下命名实体图,这样我就可以优化我的查询,以确定我需要走多远: 路线: 停止: 孩子: 联系人: 我在我的仓库类中使用它们: 然而,我看不到正在进行任何连接查询,当我试图访问stops的子级时,会抛出一个lazyinit异常。我的理解是,这就是如何使用实体图来优化查询(例如,当我必须为每个单独的站点取子对象时,n 1问题),但我没有运气让它工作。

  • 主要内容:1 load加载延迟消息数据,1.1 parseDelayLevel解析延迟等级,2 start启动调度消息服务,3 DeliverDelayedMessageTimerTask投递延迟消息任务,3.1 executeOnTimeup执行延迟消息投递,3.2 scheduleNextTimerTask下一个调度任务,3.3 correctDeliverTimestamp校验投递时间,3.4 messageTimeup恢复正常消息,,基于RocketMQ release-4.9.3,深入