Bug 266476 – Visible snapshot of outdated DOM state on leaving fullscreen

• Status: NEW
• Component: Layout and Rendering

[Wojciech Czechowski]

Example url: https://codepen.io/Wojciech-Czechowski/pen/vYbqpLq

Brief explanation of what attached code does: 

There is a div with id of "fs-element", that acts as a wrapper for 3 different layers, that are toggled interchangeably in DOM on different Events: 

1. "Main" layer is visible on mouseover event, but not in fullscreen.
2. "Attribution" layer is visible on mouseout event, but not in fullscreen.
3. "Fullscreen" layer is visible after toggling fullscreen and in fullscreen only.

Additionally, on fullscreenchange event, there is a "fullscreen" attribute added to the fs-element on entering fullscreen, and removed on leaving it. It is used to prevent toggling mouseover and mouseout event handlers from changing layer in fullscreen.

Steps to reproduce the problem: 
1. Open the attached link in Safari browser
2. Hover over the rectangle element, to change visible layer to Main (the one with red overlay)
3. Click "Open fullscreen" button to requestFullscreen() on the element and change visible layer to fullscreen layer (the one with blue overlay)
4. Move the mouse somewhere outside of area where the rectangle was on entering fullscreen (to prevent toggling mouseover event on leaving fullscreen)
3. Exit fullscreen mode with Escape key

Expected behaviour: 
Layer changes from fullscreen (blue overlay) to attribution (gray, with description on bottom) (can be seen in different browser, chrome for example)

Actual behaviour: 
There is a snapshot of main layer from when requestFullscreen was originally called (button in hover state) visible for about .5s, even though this layer is not present in DOM anymore...

[Radar WebKit Bug Importer]

<rdar://problem/120044452>