bug: styling issues when ion-split-pane is open

[maelp]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When ion-split-pane is open, and to the left of the page, it shifts the content of the page in such a way that it's no longer possible to know where an element is on the screen.

For instance, I'm adding a D3.js visualization to my page, with a tooltip which is realized as a div with a position: absolute or position: fixed, and which moves the div style to top: {curMouseEventPos.y}px; left: {curMouseEventPos.x}px when there is a mouseover event

This works fine if the menu is not displayed

But as soon as the menu is displayed, it seems that the mouseEventPos is not the correct one (or that setting it on my div does not have the proper effect)

and I have no idea how to set the div position and top, left parameters to account for the fact that the pane is open (also I'm not sure whether we can know if it's open)

Expected Behavior

I would like to be able to set a div to position: absolute or position: fixed, and that its top and left position really correspond to what is on the screen, and not be shifted by the pane

For now, even setting the side-menu to "overlay", "reveal" or "push" does not change the issue. The only thing I could do is to set it's side="end" but I'd rather keep the menu on the left.

Is there a way to fix this? (have a div with an absolute position on the page where updating the left, top of the div corresponds to the actual position on the page, and is not shifted by the size of the side menu?)

Steps to Reproduce

• create a side menu
• create an element on the page which is displayed at the location of the mouse cursor when hovering on another element, using position: fixed, and the top, left styles
• when the menu is closed, this works fine
• when the menu is open, the div position is shifted by the size of the side menu

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/primet/.node/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.8.5

Capacitor:

Capacitor CLI : 3.3.1
@capacitor/android : 3.4.3
@capacitor/core : 3.4.1
@capacitor/ios : 3.3.1

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0

System:

NodeJS : v16.14.0 (/usr/local/bin/node)
npm : 8.3.1
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior?

[maelp]

There's no repo for this, but perhaps you have an idea of how to know whether the sidemenu is open or not, and how to correct for the size of the menu

[liamdebeasi]

Unfortunately it is going to be hard for us to verify/fix this behavior if we cannot reproduce the issue.

The split pane component has an ionSplitPaneVisible event that fires whenever the split pane is expanded/collapsed: https://ionicframework.com/docs/api/split-pane#events

The menu itself has several lifecycle events you can use as well: https://ionicframework.com/docs/api/menu#events

[maelp]

Added a repository at https://github.com/maelp/ionic-vuejs-sidemenu-bug

[maelp]

(not sure how to capture mousemove so for now the tooltip only appears when you enter the hover div)

[maelp]

There are three tooltips, centering on either event.screenX, event.pageX or event.clientX to see if there was a difference. It seems the one we should use is clientX.

When the sidemenu is closed, this shows the tooltip at the location of the mouse when it enters the div (for instance if I enter next to the "hover" word):

when the sidemenu is open however, it seems that the width of the menu is added when setting the position