When I add a padding to the scrollcontainer, the canvases are rendered too wide

[JanMisker]

Bug description

I want to create a certain effect where a region is drawn with a css outline, see screenshots below to get an idea of the desired effect. Basically the handles to manipulate the region size are drawn outside the actual region.

This is proving to be a bit tricky because the wavesurfer scroll container has overflow:hidden or :auto, to make the scrolling work (obviously), which clips off the outline rectangle.

When I try to get the effect by adding a padding to the scroll container, it almost works except for one thing: the actual canvas element width is calculated with the 'old' width of the scroll container, to be more precise the clientWidth of the scroll container is used quite a few times in renderer.ts. And clientWidth includes the padding. So there is a little 'tail' where the canvas is drawn a bit wider, padding-left + padding-right, than the actual container.

I apologise if this is not considered an actual bug, guess it can be debatable, but still: the 'drawable width' of the scroll container can not be assumed to be the same as its clientWidth.

Environment

• Browser: any
• Noteworthy is that in Wavesurfer 6 I had this working, but we want to upgrade to 7.

Minimal code snippet

::part(scroll) {
  padding: 12px;
}

Expected result

The canvas is drawn inside the scroll container.

Obtained result

The canvas is drawn outside the scroll container

Screenshots

In this screenshot the canvas element is highlighted in element inspector.

You can see it is a little bit wider than the wrappers above it (when completely zoomed out), in this case 2*12px = 24px .

[katspaugh]

I understand that you are trying to achieve a certain style and are modifying the CSS of a core wavesurfer element for that which messes with its internal workings. That’s why I was reluctant to expose the scrolling container but added it anyway because it was requested in a PR. I don’t consider this a bug and recommend styling only the outer wavesurfer container if possible.

[JanMisker]

Yes I definitely understand that tweaking the scroll container quickly becomes problematic.

However it is not possible to achieve this style without doing some kind of styling to the inner workings, because the scroll container clips off anything that's outside of it and because the base width of the canvas is the clientWidth of the scroll container. These two together seem to make it impossible to get a region with a css outline that extends outside the scroll container.

I added the bug label because I was able to achieve this effect in v6, without doing something really crazy, so from my perspective this is a breaking change. But of course I don't mind that it is now a discussion. I'm already very grateful that you respond so quickly.

For now I have to stick to v6 because of this, but I would be happy to see if I can make a PR that adds something like a scrollPadding parameter to the main wavesurfer options. But at first glance it feels a bit like a can of worms, because other plugin behaviors might also be impacted because the do something with the width, e.g. via getWidth().

[JanMisker]

@katspaugh sorry to bug you again, as indicated in my previous remark it is not possible to use only CSS to fix this.
I am happy to work on a PR for this but it feels a little bit like a can of worms. Do you have any pointers regarding where to start?

[katspaugh]

I would start by finding the places where it uses the scroll container width in render.js and making it ignore the padding.

[JanMisker]

See #3929