Search code examples
firefoxhtml5-videohtml5-fullscreen

Video fullscreen exit causing scroll position to change

I've encountered an issue with Firefox specifically (I'm using version 61.0.1 (64-bit)) where upon exiting the fullscreen of a video element on a page which is scrolled down it will caused the scrollTop of the body to return to an incorrect position.

Example code to test would be like (where ... are multiple elements causing the page to be long):

<p>1</p>
<p>2</p>
<p>3</p>
...
<p>7</p>
<p>8</p>
<p>9</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>
<p>10</p>
<p>11</p>
<p>12</p>
...
<p>19</p>
<p>20</p>
<p>21</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>

Example fiddle: https://jsfiddle.net/webbm/p8ws3yc9/

In my example I've tried to keep the HTML to some very basic elements so as not to introduce CSS related issues.

On the example above:

  • Upon exiting the first video's fullscreen, the scrollTop of the body is in the correct place.
  • Upon exiting the second video's fullscreen, the scrollTop of the body is moved upwards.
  • This behaviour still occurs even if there is only the second video element, so I don't believe it's related to having more than one video element present.

Is this a known issue with a work-around?

Solution

  • I've taken this to Mozilla as a bug under https://bugzilla.mozilla.org/show_bug.cgi?id=1479262 and they are investigating.