search

fatihsolhan / v-onboarding

v-onboarding is a super-slim, fully-typed onboarding component for Vue 3
https://v-onboarding.fatihsolhan.com/
MIT License
164 stars 20 forks source link

Rectangular highlight area is offset from the target element #94

Open franck102 opened 4 months ago

franck102 commented 4 months ago

Describe the bug The white "gap" in the overlay that is supposed to highlight the element being described by a step is offset horizontally and vertically. The Popper dialog is correctly positioned w.r.t. the element.

To Reproduce Steps to reproduce the behavior:

  1. Use this document structure:
...
...
... ...

body { height: 100vh; } div#mainPanel { height: 100%; margin-left: 160px; } div.navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }

Expected behavior I'd like the target element to be highlighted, it is greyed out by the overlay instead. The white rectangle seems to be offset by the width of the sidebar, and by the height of the fixed navbar.

Trying absolute or fixed Popper strategies didn't help - in fact I don't even think that Popper is responsible for placing that rectangle?

fatihsolhan commented 3 months ago

Hey @franck102 I appreciate your bug report and interest to v-onboarding. Could you please create a demo page on codesandbox or similar platforms to reproduce this issue better?

bubbzDotDev commented 2 months ago

I have a similar issue. The rectangle is initially offset lower than expected. Then if I resize the window or scroll the page, it snaps to where I expected it to be. I'll try and create a demo page to reproduce it.