Skip to content

feat(locationStrategies): support page scale #21878

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.

Sign up for GitHub

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

Jump to bottom
Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(locationStrategies): support page scale #21878

wants to merge 1 commit into from

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Aug 4, 2025 •
edited
Loading

Description

When the zoom is forced with CSS, browser calculates wrong offsets for elements (getBoundingClientRect) and transforms for tooltips and menus are skewed.

  • fix VMenu
  • fix VTooltip
  • fix VPie (absolute target)
  • cleaner way to pass pageScale to the deep internals

fixes #20719

Markup:

Note: you have to pnpm build for the playground to pick up changes in the box.ts

dev/index.html 
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="zoom: .75;">
  <!-- -->
  <body>
    <div id="app"></div>
+    <script>window.pageScale = 0.75</script>
    <script type="module" src="/index.js"></script>
  </body>
</html>
dev/Playground.vue 
<template>
  <v-app theme="dark">
    <v-container>
      <div class="d-flex justify-space-around pa-16">
        <v-btn>
          Start
          <v-tooltip
            activator="parent"
            location="start"
          >Tooltip</v-tooltip>
        </v-btn>

        <v-btn>
          End
          <v-tooltip
            activator="parent"
            location="end"
          >Tooltip</v-tooltip>
        </v-btn>

        <v-btn>
          Top
          <v-tooltip
            activator="parent"
            location="top"
          >Tooltip</v-tooltip>
        </v-btn>

        <v-select :items="['a','b']" max-width="200" />

        <v-btn>
          Bottom
          <v-tooltip
            activator="parent"
            location="bottom"
          >Tooltip</v-tooltip>
        </v-btn>
      </div>
      <div class="d-flex ga-16 justify-center">
        <v-btn>
          Show Menu
          <v-menu activator="parent" stick-to-target>
            <v-list>
              <v-list-item title="option 1" />
              <v-list-item title="option 2" />
            </v-list>
          </v-menu>
        </v-btn>
        <v-pie :items="items" hover-scale=".2" animation tooltip />
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    { key: 1, title: 'Series A', value: 45, color: '#2b6d40' },
    { key: 2, title: 'Series B', value: 30, color: '#4e9963' },
    { key: 3, title: 'Series C', value: 15, color: '#72c789' },
    { key: 4, title: 'Series D', value: 10, color: '#97f7b0' },
  ]
</script>

@J-Sek J-Sek self-assigned this Aug 4, 2025
@J-Sek J-Sek added T: enhancement Functionality that enhances existing features C: VMenu C: VTooltip labels Aug 4, 2025
@J-Sek J-Sek force-pushed the feat/support-page-scale branch from f71dc77 to 0677b2b Compare August 4, 2025 21:52
@J-Sek J-Sek added the help wanted We are looking for community help label Aug 4, 2025
@J-Sek J-Sek marked this pull request as ready for review August 4, 2025 21:53
@J-Sek J-Sek force-pushed the feat/support-page-scale branch from 0677b2b to 91f3694 Compare August 4, 2025 22:02
@KaelWD KaelWD marked this pull request as draft August 5, 2025 09:04
@alekbless
Copy link

Yes, I would love this.

When migrating from Vuetify 2 to Vuetify 3, VMenu no longer takes the scale into account.

In Vuetify 2 I did:

v-model="showMenu"
attach="#viewArea"
absolute
:position-x="container.pos_x"
:position-y="container.pos_y"
offset-y

With #viewArea scaled, the VMenu positioned itself relative to the parent (the container variable).

Now I refactored to Vuetify 3:

v-model="showMenu"
attach="#viewArea"
location="right"
:target="[container.pos_x, container.pos_y]"
min-width="400"

But now the VMenu does not account for the scale.

@J-Sek
Copy link
Contributor Author

J-Sek commented Aug 27, 2025

@alekbless, can you verify the proposed changes against your implementation or suggest the concrete playground? I have a hard time understanding what your previous comment brings to the table.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@J-Sek J-Sek

Labels
C: VMenu C: VTooltip help wanted We are looking for community help T: enhancement Functionality that enhances existing features
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.7.4] Incorrect Tooltip Positioning When Body's Zoom is Set to 0.7
2 participants
@J-Sek @alekbless