QScrollArea - Thumb style positionning ignored (v2.17)

[AxelMolina1]

What happened?

I am sorry to reopen an issue for this bug but it has been closed without listening to us so I am forced to opening it again. Previous issue : #17597

Since the version 2.17, in some cases when we specify position in the thumb style, the positionning doesn't apply which result in an offset between the two elements.

For vertical thumb style, we cannot use top and right CSS properties
And for horizontal thumb style, we cannot use bottom and left

In the previous issue, @rstoenescu suggested to use the offset property to shift the bar. Unfortunately it does not work and the issue has been closed. You can see in the codepen example this offset property not working.

It's been now a year this bug is still here and it's really concerning for the future.

What did you expect to happen?

I expect the thumb-style property of q-scroll-area to apply correctly positionning properties, like it used to on version <2.17 of quasar

Reproduction URL

https://codepen.io/AxelMolina1/pen/azvrLqg

How to reproduce?

1. Go to the provided reproduction URL
2. Scroll up and down
3. See the active bar offset with its container

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response

[rstoenescu]

Just to be extra clear on all my previous explanations:
For the vertical & horizontal thumb, do not use right/left props, but vertical-offset and horizontal-offset props. These two props apply ONLY for the thumb (as also indicated in the QScrollArea API card on docs). However, you can still use the right/left/whatever css props for the bar, which will actually be needed for you to perfectly place it under the thumb.
We cannot auto-account for all use-cases for the bar (through the offset props) so manual css is needed for it.

Your example with "right" css prop added to the bar: https://codepen.io/rstoenescu/pen/pvgrZgM

If I am missing something, please do comment. Thank you.