Issue is seen  on the latest canary(59.0.3042.0) on Mac OS 10.12.3 as well.

Bisect Information:
---------------------
You are probably looking for a change made after 440784 (known good), but no later than 440785 (first known bad).

CHANGE-LOG URL:
-----------------
https://chromium.googlesource.com/chromium/src/+log/59ec2c1b938fc633a64079b176283b800d96f689..26b1599ba3f24f4124d8d78227fb815dc1c2e696

From the CL above, assigning the issue to the concern owner
Review-Url: https://codereview.chromium.org/2587913007

stevenjb@ Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Thanks!

I can't reproduce this on a Pixel, which is unsurprising since it is high DPI.

I'm not sure that we care about this at 33% zoom. It's certainly not a P1. Note: Both sliders disappear at 25%.

dbeam@, dpapad@ - any clever CSS tricks we can do to keep these from disappearing, or do we not care and should mark this WontFix?

The trick I can think of is that the line should be implemented as a border, not as the content of a <div> or <span>. There is special logic in the rendering engine to ensure that borders always visible and have the desired thickness regardless of zoom level. There is more context in a similar bug we fixed a while ago, https://bugs.chromium.org/p/chromium/issues/detail?id=663304

It looks like the div in question is in paper-progress.html:
https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chromium/paper-progress/paper-progress.html?q=paper-progress.html+package:%5Echromium$&dr&l=252

It is styled with a colored 'background'.

I filed https://github.com/Polymer/paper-progress/issues/21

Removing the Milestone and lowering to a P3, this really doesn't seem at all urgent to me.

stevenjb@: that's the wrong element, that's a Polymer 0.5 element

this is the right one https://github.com/PolymerElements/paper-progress/issues

Sigh. Thanks for catching that.

Correct issue:
https://github.com/PolymerElements/paper-progress/issues/57

there's a PR that would handle this here:
https://github.com/PolymerElements/paper-progress/pull/64

dunno why review's stalled out

(Apologies for the late response.)

Due to the fact that would cause a breaking change with paper-progress, we will not be fixing this in that repo. Feel free to examine the diff at https://github.com/PolymerElements/paper-progress/pull/64/files to fork/create a customized slider based on paper-progress/paper-progress.

PR didn't actually fix.  Only repros at 25% zoom for me after playing with it for a while.

 Issue 766081  has been merged into this issue.

 Issue 752023  has been merged into this issue.

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

@aee: This still happens, even though these elements no longer use paper-progress. Renaming bug title.

Can we modify cr-slider to not use a div's height at [1] to display the line? Instead using a border should fix it, since IIRC borders don't suffer from pixel rounding.

[1] https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_slider/cr_slider.html?l=41

Actually trying with a minimal example, I still see the line disappearing when using border instead of height, see attachment. I don't know if there is anything we can do here.

Deleted: borders.html 279 bytes

borders.html 279 bytes View Download

Seems to work if the height is specified in addition to the border. See updated example (also pasting below)

<style>
  #height {
    height: 2px;
    width: 100px;
    background-color: red;
    margin-bottom: 10px;
  }

  #border {
    border-top: 2px solid red;
    width: 100px;
    height: 2px;
  }
</style>
<div id="height"></div>
<div id="border"></div>

Deleted: borders.html 295 bytes

borders.html 295 bytes View Download

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

commit b68b46510fea6a0722157908d469590088613bf7
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Sat Nov 17 00:14:03 2018

WebUI: cr-slider, use border-top to display bar to support low zoom levels (e.g. 33%)

Bug:  701684 
Change-Id: I668646a89402851ec19acc8b11f0fbd979157eeb
Reviewed-on: https://chromium-review.googlesource.com/c/1334943
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609040}
[modify] https://crrev.com/b68b46510fea6a0722157908d469590088613bf7/ui/webui/resources/cr_elements/cr_slider/cr_slider.html