Position：修复了 Safari 与 Chrome 不同的处理方式

Question

I have a React app in which, after you scroll past a shopping cart, it becomes fixed to stay in view.

In Chrome, upon becoming fixed, the cart needs a transform: translateX(-100%) to retain its X-position. In Safari, it doesn't, and applying the rule causes the cart to misalign.

A stripped example can be seen here: https://jsfiddle.net/du167r85/ -- the cart becomes fixed after 1 second.

---

Fiddle result on Chrome:

Fiddle result on Safari:

If the element is fixed from the start (eg without a timer or scroll event), Safari and Chrome render it the same, both requiring the transform: translateX(-100%) rule.

Is this a bug, and there a workaround for this issue?

Answer 1

I guess one of your problems is that you haven't defined a position left or right for your fixed element.

Give right: 60px; to your #cart and comment -webkit-transform: translateX(-100%);

Here's and updated JSFiddle

Tested both on Safari and Chrome and it's working fine.

Another thing I would do is to move the position: fixed; up to #cart-wrap . I tried it as well and it still works fine!