Fixed elements disappear on iPhone Plus after page-transition

[MickL]

I figured out a really weird problem which "only" affects all iPhone Plus in landscape with multiple tabs open. I made a CodePen and you can reproduce it with the Xcode Simulator on macOS.

I examined this problem alot and did not find any solution or workaround yet.

Description: Any fixed elements(e.g. data-position="fixed" and data-role="header") disappear after a page transition.

CodePen: http://codepen.io/MickL/pen/BQLVay?editors=1100

Link to reproduce(copy into Simulator): http://s.codepen.io/MickL/debug/BQLVay

Steps to reproduce:

• Use any iPhone Plus model
• Rotate into landscape
• Open minium of 2 tabs
• Transition to a page with fixed elements
• -> Fixed elements disappear after transition finished
• -> The button on top left corner (which is now invisible) is still working
• -> If you scroll alot or change the tabs back and forth the elements are shown correctly

"Interesting" stuff:

• iPad also shows tabs but is working fine
• The element is positioned correctly but invisible(see Safari inspector) and touch-actions(like buttons) still work (press the button on top left corner)
• While page-transition the elements are shown
• When the fixed element is totally empty it does not get hidden (see footer in example)
• Those empty elements are hidden until transition is finished
• Scrolling alot or changing the tabs back and forth shows the elements correctly

[MickL]

Seems to be a bug within WebKit. Similiar problem at Bootstrap modal: https://github.com/twbs/bootstrap/issues/18859 Reported WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=153056

[cvrebert]

Consider filing a Radar about the bug at https://bugreport.apple.com and mentioning that it's a duplicate of <rdar://problem/24191746>. Apple is said to use Radar duplicate counts as a factor in its prioritization process.