Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Applying zoom to page body causes X-Grid-Focus to become disconnected from cursor #3273

Open
Fournogo opened this issue Jun 28, 2023 · 6 comments
Labels

Comments

@Fournogo
Copy link

Fournogo commented Jun 28, 2023

When I add "zoom: 0.75;" to my style sheet, all the elements scale correctly; but the x-grid-focus and tooltip become disconnected from the client cursor. It behaves like the x-grid-focus and cursor are not in the same coordinate space. I've tried various combinations of zooms and transform scales in both my style sheet and the billboard style sheet with no success.

Let me know if there's anything I should try or if this sounds like a genuine bug. I'm happy to provide anything that would help solve the issue.

Below is a screenshot of the issue I'm having. The X is almost exactly where my cursor was in that shot. The x-grid-focus aligns correctly on the left side of the chart, indicating it aligns at 0, but the disparity grows as you move right.

Screenshot 2023-06-27 at 7 45 22 PM
@Fournogo Fournogo changed the title Applying zoom to page body causes X-Grid-Focus becomes disconnected from cursor Applying zoom to page body causes X-Grid-Focus to become disconnected from cursor Jun 28, 2023
@Fournogo
Copy link
Author

Worth noting the same issue happens with transform-scale and its implementation in various browsers.

@watnab
Copy link

watnab commented Jun 28, 2023

It sounds like #2095.
I couldn't see what "disconnected" means though.

@Fournogo
Copy link
Author

Fournogo commented Jun 28, 2023

It sounds like #2095. I couldn't see what "disconnected" means though.

Disconnected as in the x coordinate of the x-grid-focus is not the x coordinate of the cursor. The coordinate space of the screen is being projected down into a smaller coordinate space of the chart. If you notice in the image my cursor is ~400px to the right of the x-grid-focus

Also when I refer to "zoom: 0.75;" I'm referring to zoom being added to my website style sheet, not the zoom function within billboard.js. Thought I should clarify.

@Fournogo
Copy link
Author

Here are a couple more screenshots to illustrate the issue. The cursor is marked with a black X in both. Notice how as the cursor moves to the right (positive x axis) the difference between cursor X coordinate and x-grid-focus X coordinate becomes greater, indicative of a coordinate transform issue.

Screenshot 2023-06-27 at 10 08 56 PM Screenshot 2023-06-27 at 10 09 06 PM

@watnab
Copy link

watnab commented Jun 28, 2023

Thought I should clarify.

I missed the condition you had written first:

When I add "zoom: 0.75;" to my style sheet,


I think in general it's hard for the library to resolve the issue
when the library user distorts the chart the library drawed.

Dirty workaround ?

  1. Put the chart page into an iframe.
  2. Apply style "transform: scale(0.75)" to the iframe.
  3. It seems to work because the browser will translate the coordinate of mouse cursor in the iframe.

@Fournogo
Copy link
Author

That should get me where I need to go. Thank you!

@netil netil added the question label Jul 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants