Able to reproduce the issue on Windows, Mac & Linux on latest Canary# 64.0.3275.0 (Win, Mac & Linux) and #64.0.3274.0 (Android).
This is a Non-Regression Issue starting M64# 64.0.3242.0 as the flag "New Media Controls" is available from the mentioned build.

Note: The media controls are not proper and looking same as in the screenshot attached (when any flag is not available) on Android (M52# 52.0.2743.98) and on Windows, Mac & Linux (M44# 44.0.2403.157). 
So marking the issue as Untriaged for further inputs.
Thank You.

fbeaufort@, is this still an issue? I'm unable to reproduce with current code

I can still reproduce on my Mac with Google Chrome 65.0.3325.0 (Official Build) canary (64-bit)

Deleted: Screen Shot 2018-01-19 at 4.36.22 PM.png 1.1 MB

	Screen Shot 2018-01-19 at 4.36.22 PM.png 1.1 MB View Download

Oh I misunderstood the problem. I can reproduce that issue as well, but couldn't repro the extra-long bar shown in the initial picture. Thanks!

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a7d5300e593dda8e8643143fa587dd1493109381

commit a7d5300e593dda8e8643143fa587dd1493109381
Author: Tommy Steimel <steimel@chromium.org>
Date: Tue Jan 23 00:39:43 2018

Refactor timeline segment positioning for Modern Media Controls

This CL modifies the timeline segment positioning calculation for
modern media controls to use the width of the timeline track instead
of the timeline itself. This fixes a bug where the segments were
slightly off.

Also, this CL switches the "before" and "after" segments to make more
sense. The before segment was after the thumb and the after segment was
before the thumb. This CL puts the before segment before the thumb and
the after segment after the thumb.

Bug:  787443 
Change-Id: I59442596b2475ba007380adffee7aa4d11b7b699
Reviewed-on: https://chromium-review.googlesource.com/879546
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#531090}
[modify] https://crrev.com/a7d5300e593dda8e8643143fa587dd1493109381/third_party/WebKit/Source/modules/media_controls/elements/MediaControlSliderElement.cpp
[modify] https://crrev.com/a7d5300e593dda8e8643143fa587dd1493109381/third_party/WebKit/Source/modules/media_controls/elements/MediaControlSliderElement.h
[modify] https://crrev.com/a7d5300e593dda8e8643143fa587dd1493109381/third_party/WebKit/Source/modules/media_controls/elements/MediaControlTimelineElement.cpp
[modify] https://crrev.com/a7d5300e593dda8e8643143fa587dd1493109381/third_party/WebKit/Source/modules/media_controls/resources/modernMediaControls.css

Tested the issue on 66.0.3329.0 using Windows 10,Mac 10.13.1 and Ubuntu 14.04 and is still reproducible. Seeing same behaviour as in screenshot of comment#8. Attaching screenshot for reference.

@steimel: Please check the screenshot and let us know if the fix is working as Expected. 

Thanks!

Deleted: 787443.png 325 KB

	787443.png 325 KB View Download

Hi, it looks like the fix is working based on your screenshot. The timeline segment is is the correctly spot touching the thumb

Re-opening because it seems that the bug is that the "grey area" (not loaded) does not appear or am I misunderstanding this?

hmm from what I understand that's a separate problem. If you look at the screenshot from comment 8, the issue was that the bar was in the wrong spot (it was supposed to be touching the thumb. It was off due to position calculation problems.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/93f209d5e8adbdce5a229385752eec2570cc4713

commit 93f209d5e8adbdce5a229385752eec2570cc4713
Author: Tommy Steimel <steimel@chromium.org>
Date: Wed Feb 07 17:13:10 2018

Prevent quirks mode from hiding the timeline on modern media controls

Quirks mode adds a box-sizing attribute to the range inside of a video,
which ends up setting the timeline height to zero. This CL modifies the
media controls CSS to override the quirks mode CSS.

Bug:  787443 
Change-Id: Id6a065caafcf04b0a1c2572aa388231dbfb05f29
Reviewed-on: https://chromium-review.googlesource.com/906588
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#535033}
[add] https://crrev.com/93f209d5e8adbdce5a229385752eec2570cc4713/third_party/WebKit/LayoutTests/media/controls/modern/quirks-mode-timeline-is-not-hidden.html
[modify] https://crrev.com/93f209d5e8adbdce5a229385752eec2570cc4713/third_party/WebKit/Source/modules/media_controls/resources/modernMediaControls.css

Okay, I've also fixed the issue described in comment 15. Closing again

Verified in Chrome 66.0.3344.0 for Mac. Thank you Tommy!