HTML Element changed from position: sticky to position: fixed renders incorrectly

Originator:oliver.byford
Number:rdar://29459554 Date Originated:1 Dec 2016
Status:Closed Resolved:
Product:iOS + SDK Product Version:10.1
Classification: Reproducible:Always
 
Area:
WebKit

Summary:
When an HTML element that was previously of type `position: sticky;` is changed to type `position: fixed;` it is rendered incorrectly by Webkit browsers on iOS.

Steps to Reproduce:
1. Load the 'closed' example (closed.html) in an iOS browser.
2. Click the 'Show / Hide Table of Contents' toggle link

Expected Results:
The nav element 'expands' to fill the entire viewport.

Actual Results:
The page is rendered incorrectly - the navigation element occupies approximately the lower third of the screen. Despite this, when interacting with the screen, the browser reacts as if the elements are in their correct positions.

Inspecting the page using Safari's remote debugging also highlights the elements as if they are where they 'should be'.

If the same CSS is applied when the page is loaded, the example appears correctly (as in open.html).

Version:
iOS 10.1 (14B72), Safari or Chrome 54.0.2840.91

Notes:
Hosted version of example available at https://36degrees.github.io/webkit-ios-fixed-sticky/

Not able to reproduce on my mac (Safari Version 10.0 (12602.1.50.0.10), Mac OS 10.12 (16A323))

Configuration:
iPhone 6s

Comments

Looks like this was fixed at some point, as I can no longer reproduce in iOS 12.2 (16E227). Closed.

By oliver.byford at May 31, 2019, 8:26 a.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!