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

【问题标题】：Position: fixed handled differently by Safari vs. Chrome位置：修复了 Safari 与 Chrome 处理方式不同的问题
【发布时间】：2020-06-22 10:21:25
【问题描述】：

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

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

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

Chrome 上的小提琴结果：

Safari 上的小提琴结果：

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

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

【问题讨论】：

【解决方案1】：

我猜你的问题之一是你没有为你的固定元素定义一个左或右的位置。

将right: 60px; 给您的#cart 并评论-webkit-transform: translateX(-100%);

这里更新了JSFiddle

在 Safari 和 Chrome 上都经过测试，运行良好。

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

【讨论】：