The current solution of masking the current target using svg mask has some drawbacks - It doesnt account for any zoom applied to a parent element, and it also does not seem to account for border radius.
An alternative solution is to use background with opacity and then apply z-index and position:relative to the target. (Should probably do a check to see if the target already has a position-property where z-index can be applied, and also cleanup when leaving the step.)
Example of the visual bug (and POC of alternative solution):
https://stackblitz.com/edit/vitejs-vite-krz7l2?file=src%2Fcomponents%2FOnboarding.vue
The current solution of masking the current target using svg mask has some drawbacks - It doesnt account for any zoom applied to a parent element, and it also does not seem to account for border radius.
An alternative solution is to use background with opacity and then apply z-index and position:relative to the target. (Should probably do a check to see if the target already has a position-property where z-index can be applied, and also cleanup when leaving the step.) Example of the visual bug (and POC of alternative solution): https://stackblitz.com/edit/vitejs-vite-krz7l2?file=src%2Fcomponents%2FOnboarding.vue