Position：修復了 Safari 與 Chrome 不同的處理方式

Question

我有一個 React 應用程序，在您滾動購物車后，它會固定在視圖中。

在 Chrome 中，在固定后，購物車需要transform: translateX(-100%)以保留其 X 位置。 在 Safari 中，它沒有，並且應用該規則會導致購物車錯位。

可以在這里看到一個剝離的示例： https://jsfiddle.net/du167r85/ - 購物車在 1 秒后固定。

---

Chrome上的小提琴結果：

Safari 上的小提琴結果：

如果元素從一開始就固定（例如，沒有計時器或滾動事件），Safari 和 Chrome 呈現相同，都需要transform: translateX(-100%)規則。

這是一個錯誤，並且有解決此問題的方法嗎？

Answer 1

我想你的問題之一是你沒有為你的固定元素定義一個 position 左或右。

給right: 60px; 到您的#cart並評論-webkit-transform: translateX(-100%);

這是和更新的JSFiddle

在 Safari 和 Chrome 上都進行了測試，並且工作正常。

我要做的另一件事是移動position: fixed; 最多#cart-wrap 。 我也試過了，它仍然可以正常工作！