Skip to content

feat(locationStrategies): support CSS zoom #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
Merged
merged 1 commit into from
Sep 29, 2025
Merged

feat(locationStrategies): support CSS zoom #21878

merged 1 commit into from
Sep 29, 2025

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)
  • fix viewport size calculation

fixes #20719

NOTE: Safari does not support document.body.currentCSSZoom, but you should be able to set this value manually (and keep in sync with forced zoom value).

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

This comment was marked as off-topic.

Sign in to view
@J-Sek

This comment was marked as outdated.

Sign in to view
@KaelWD KaelWD force-pushed the master branch 4 times, most recently from 142b234 to bb54746 Compare September 12, 2025 09:01
@J-Sek J-Sek mentioned this pull request Sep 26, 2025
Open
@J-Sek J-Sek force-pushed the feat/support-page-scale branch 3 times, most recently from 20a3464 to bb63c8d Compare September 29, 2025 14:14
@J-Sek J-Sek force-pushed the feat/support-page-scale branch from bb63c8d to bd70825 Compare September 29, 2025 14:16
@J-Sek J-Sek changed the title feat(locationStrategies): support page scale feat(locationStrategies): support CSS zoom Sep 29, 2025
@J-Sek J-Sek marked this pull request as ready for review September 29, 2025 14:16
@J-Sek J-Sek removed the help wanted We are looking for community help label Sep 29, 2025
@J-Sek J-Sek merged commit 32242a3 into vuetifyjs:master Sep 29, 2025
10 checks passed
@J-Sek J-Sek deleted the feat/support-page-scale branch September 29, 2025 14:23
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 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