title: Clicking video button that is inside scrollable div, moves it to the right
body: <p>I created a fiddle to demonstrate the issue. <a href="https://jsfiddle.net/2ypdaqbx/4/" rel="nofollow noreferrer">LINK</a></p>
  
  <p>You can realize that the div has a 200% width and a translate attribute</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;video controls="controls"&gt;
        &lt;source 
          src="http://techslides.com/demos/sample-videos/small.mp4" 
          type="video/mp4"
        &gt;
      &lt;/video&gt;
    &lt;/div&gt;
  
    .container{
          width: 200%;
          transform: translate(0px, 0px);
     }
  </code></pre>
  
  <p>You can go to the fiddle and click the three-dot item in the right-bottom corner (<strong>Google Chrome 67+</strong>). You will show that the event, moves the container to the right.</p>
  
  <p>If I switch <em>transform: translate(0px, 0px);</em> to <em>left:0; top:0;</em> it will work.</p>
  
  <p>My question is: Why this new player has that strange behavior and how to manage it without change the containers transform.</p>