时间戳

首页 > 解决方案 > 位置：修复了 Safari 与 Chrome 处理方式不同的问题

html - 位置：修复了 Safari 与 Chrome 处理方式不同的问题

问题描述

我有一个 React 应用程序，在您滚动购物车后，它会固定在视图中。

在 Chrome 中，在固定后，购物车需要 atransform: translateX(-100%)来保持其 X 位置。在 Safari 中，它不会，并且应用该规则会导致购物车错位。

可以在此处看到一个剥离的示例：https ://jsfiddle.net/du167r85/ - 购物车在 1 秒后固定。

Chrome上的小提琴结果： Chrome上的小提琴结果

Safari上的小提琴结果： Safari上的小提琴结果

如果元素从一开始就固定（例如，没有计时器或滚动事件），Safari 和 Chrome 会以相同的方式呈现它，两者都需要transform: translateX(-100%)规则。

这是一个错误，并且有解决此问题的方法吗？

标签： htmlcssgoogle-chromesafari

解决方案

我想您的问题之一是您没有为固定元素定义左侧或右侧的位置。

给right: 60px;你#cart和评论-webkit-transform: translateX(-100%);

这是和更新的JSFiddle

在 Safari 和 Chrome 上都进行了测试，并且运行良好。

我要做的另一件事是将position: fixed;向上移动到#cart-wrap. 我也试过了，它仍然可以正常工作！

推荐阅读