如何获得CSS过渡才能在iPad（iOS）上运行？

2024-05-11 • 问答

我的网页上有一个按钮，可将页面从页面的一个部分切换到同一页面的另一部分（例如，从我的简历跳到我的项目）。在我的Web浏览器（Chrome）和Android设备浏览器（Chrome）上，当我按下按钮时，它都有一个动画，可以平滑地滚动页面。但是，当我尝试使用iPad设备（Chrome和Safari）上的按钮时，动画不存在，并且页面立即跳转到另一部分。

当我从iPad访问页面时，如何调整代码以使动画起作用？以下是一些相关代码：

.fa-chevron-down:hover,.fa-chevron-down:hover,.fa-chevron-down:focus,.fa-chevron-down:active,.fa-chevron-down:visited,.fa-chevron-down:link {
    text-decoration: none;
}

<a id="scroll-arrow" href="#about-me">
    <i id="scroll-btn-header" class="fas fa-chevron-down fa-3x"></i>
</a>

a610024739 回答：如何获得CSS过渡才能在iPad（iOS）上运行？

并非所有浏览器都实现某些CSS动画。当它们存在时，有时它们在不同的浏览器引擎中的行为会有所不同，因为它们不在W3C标准中。

如果您的网站是使用纯HTML / CSS / JS编写的（即没有诸如Vue，React等框架），则您必须自己处理这种不兼容问题。

您必须在某些CSS行中添加供应商前缀，才能使其在Safari上正常工作。

.example {
/* On Chrome and Firefox */
    transition: all .5s;
/* On Safari */
    -webkit-transition: all .5s;
}

我的建议是，您将所有CSS代码复制并粘贴到online auto-prefixer中，从而为您添加这些供应商前缀。

css ipad web

本文链接：https://www.f2er.com/2879359.html

如何获得CSS过渡才能在iPad（iOS）上运行？

a610024739 回答：如何获得CSS过渡才能在iPad（iOS）上运行？

大家都在问