Back button can break absolutely positioned elements

• Component: Layout and Rendering
• Status: NEW ---

Created attachment 442908 [details]
Correct result (before) and incorrect result after hitting back button

Hi,

When using the back button of the browser, I am experiencing some absolutely positioned elements that are defying any positioning logic.

To reproduce the issue follow those steps:

1. Go to https://focal-theme-ivory.myshopify.com/products/aubreya-8072-maxi-dress and add the product to the cart.
2. Once added, open the dedicated cart page by following this URL: https://focal-theme-ivory.myshopify.com/cart
3. At this stage, the icon on the "Checkout" button is properly positioned. Click on the "Checkout" button and wait to be redirected to the checkout.
4. Then, hit the back button, and the icon is becoming positioned incorrectly.

The markup is exactly the same, and the icon that is positioned absolutely should be positioned according to the relative parent, but after hitting the back button it is not.

[Simon Fraser (smfr)]

I can reproduce. It's a position:absolute <span> inside flex.

[Radar WebKit Bug Importer]

<rdar://problem/85099235>