Bespoke Slider Thumb not visible in Chrome (Mac)

Hi folks. Another day, another glitch.

I have created a template with a Progress Bar/Meter utilising the rather brilliant example posted by Allison LaMotte here. I did have quite a difficult time getting the slider to fit properly due to the fact that I wanted the progress indicator (slider thumb) to be only 2 pixels wide and 980 long. It took a long time to get it right, but eventually, I got it.

The progress bar works perfectly when tested in Preview and within Review in Windows on Chrome and Edge. See below pic at the bottom.

Chrome Edge Windows - all good

Unfortunately, when I look at it in Review, in Chrome on the Mac, the Progress Bar is only very faintly discernable. See below pic at the bottom. It looks fine in Safari.

Chrome on Mac - barely visible

Does anyone have a similar issue? 

Here's a link to the demo if anyone wants to test this.

Many thanks for taking the timeout to read this.

4 Replies
Vincent Scoma

Hi Diarmaid,

Happy to jump in to help!

While I am not too sure which version of Chrome Lauren was using, I ran through the demo on my side in Chrome version  81.0.4044.129. I also saw the progress bar during my run through. 

Here is how my test went: Screen Recording.  

Please let us know if you have any questions!