Wrong numbers in Safari 14

[jaimeiniesta]

Hello!

We just found a bug that only seems to happen in Safari (I'm on Safari 14 and macOS Big Sur).

When the font size is changed using Cmd - or Cmd +, the number value gets displaced showing an offset, also the bar is not properly adjusted.

Here's a video I made showing this in action, check out the black circle that should go from 0 to 100, it goes to negative numbers when the font is decreased:

https://user-images.githubusercontent.com/2629/125773303-5a31330d-369b-4454-9810-6cd0b9f8169c.mp4

This is not happening in Chrome, Firefox or Opera. Only in Safari.

[bibekrimal]

I have the same issue. The value decreases if page is zoomed out and it increases in zoomed in.

[dannycalliari]

I'm having the same issue. This bug should be resolved quickly. We are thinking about changing to a different one because of this bug

[mmjr-x]

I also encountered this issue, it has to do with zoom level affecting stroke-dashoffset on safari.

I came up with this dirty fix in order to resolve the issue:

import * as ProgressBar from "progressbar.js";

if (navigator.vendor === 'Apple Computer, Inc.') {

  const scale = window.outerWidth  / window.innerWidth;

  ProgressBar.Path.prototype._getComputedDashOffset = function _getComputedDashOffset() {
    var computedStyle = window.getComputedStyle(this.path, null);

    return parseFloat(computedStyle.getPropertyValue('stroke-dashoffset')) * scale;
  };

}

I am using typescript in my project so you might need to adjust this to your needs. Also this should be imported/loaded after you import * as ProgressBar from "progressbar.js"; and before you do any of the progressbar setup (else you might get weird results).

[mmjr-x]

@kimmobrunfeldt Let me know if you find this solution acceptable. If so I will be happy to make a PR for this :)

[kimmobrunfeldt]

This seems like a browser bug so vendor detection is OK for me, I can merge a fix if there's a PR