Segment redraw bug in Firefox?

[ffxsam]

Has anyone else ever seen anything like this in Firefox? I can't replicate it at all in Chrome nor Safari.

I'm not sure if this is a strange bug in Peaks.js, or a Firefox canvas bug.

https://user-images.githubusercontent.com/12532733/105121044-09739d00-5a99-11eb-8feb-9e922b164cc7.mp4

[dutzi]

Hey @ffxsam, did you manage to find the source for this? Happens to me on Chrome as well.

[ffxsam]

@dutzi Unfortunately not, still an issue here - last time I checked, at least.

[dutzi]

@ffxsam, I think I found it, changing this block to:

this._drawWaveform(
  context,
  this._view.getWaveformData(),
  Math.round(frameOffset),
  Math.round(this._segment ? this._view.timeToPixels(this._segment.startTime) : frameOffset),
  Math.floor(this._segment ? this._view.timeToPixels(this._segment.endTime)   : frameOffset + width),
  width,
  height
);

Seems to fix this.

(I've wrapped the values with round and floor)

[chrisn]

I haven't observed this issue myself yet. I wonder why those changes fix it, do we have non-integer values somewhere?

[dutzi]

When playing around with the zoom factor, frameOffset would sometimes be n+0.5 (148.5, for example) 🤷‍♂️

[chrisn]

I think that the fraction values may originate from mousedown and mousemove events. I have just pushed a change that calls Math.floor() on those values, which hopefully fixes this issue.

[dutzi]

I think it happens when rendering peaks in a 4K or Retina displays. It might be that in such setup, dots cover 4 (or more) pixels, 2 per each axis, that would also explain why I only saw floats that look like x.5 (and not x.72, for example).

[chrisn]

Yes, I think you're right - although I haven't seen non-integer values on my Windows 10 laptop with 4K display. window.devicePixelRatio reports 2.25. Would you mind testing the change in https://github.com/bbc/peaks.js/commit/77440c9cccda638e0b20ccc09955515d2030c870 to see if it works for you?

[ffxsam]

Still an issue in https://github.com/bbc/peaks.js/commit/426b49418325d5527fb9c2e0e59ab94dbf707424.

https://user-images.githubusercontent.com/12532733/117584936-5aa1ae00-b0d5-11eb-8896-39b3106d27c7.mp4

[ffxsam]

I noticed there's some color bleed at the edges of the waveforms. I'm wondering if this has something to do with it, like one layer is clipping over the other one for some reason?

[chrisn]

I haven't been able to reproduce this locally, in Firefox or Chrome. Which OS and browser version are you using?

[ffxsam]

macOS 10.15.7, Firefox 88.0.1. I believe this only occurs in Firefox.

[chrisn]

Thanks. I have no way to test this. Is it the case that WaveformZoomview._frameOffset is being set to a non-integer value? If so, what causes that to happen?

[ffxsam]

I'll dig into this when I get a chance and let you know.