[Media Controls] Fix text movement after opening overflow menu

Set Z translate to 0 in order to use hardware acceleration,
which allows a smoother transition.

Bug: 921578
Change-Id: Id30a8b2c05d5b789545bb0203ee9eecbb49ce4ff
Reviewed-on: https://chromium-review.googlesource.com/c/1409818
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#629043}

third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css

@@ -868,9 +868,15 @@ video::-internal-media-controls-overflow-menu-list-item {
   padding-left: 16px;
   padding-right: 16px;
   cursor: pointer;
-
   /* Cursor: pointer will cause a highlight when touch on it, this will disable it */
   -webkit-tap-highlight-color: transparent;
+
+  /*
+   * Avoid slight text movement after item transition ends.
+   * By setting translateZ, we are using hardware acceleration,
+   * which allows a smoother transition.
+   */
+  transform: translateZ(0);
 }
 
 video::-webkit-media-controls div[pseudo="-internal-media-controls-text-track-list" i].pip-presented,