Core: Fix rendering of View Transitions in Firefox by ghengeveld · Pull Request #33651 · storybookjs/storybook

ghengeveld · 2026-01-26T15:11:21Z

Closes #33631

What I did

Make the CSS transform: scale(value) conditional on the value, so it won't transform when we're not actually scaling.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Check reproduction steps here.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-33651-sha-42de033f. Try it out in a new sandbox by running npx storybook@0.0.0-pr-33651-sha-42de033f sandbox or in an existing project with npx storybook@0.0.0-pr-33651-sha-42de033f upgrade.

More information


Published version	`0.0.0-pr-33651-sha-42de033f`
Triggered by	@ghengeveld
Repository	storybookjs/storybook
Branch	`fix-scale-1`
Commit	`42de033f`
Datetime	Mon Jan 26 15:12:47 UTC 2026 (`1769440367`)
Workflow run	21362760435

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=33651

Summary by CodeRabbit

Bug Fixes
- Improved viewport rendering performance by optimizing transform handling when no zoom is applied.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nx-cloud · 2026-01-26T15:12:15Z

View your CI Pipeline Execution ↗ for commit 5b37c21

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	❌ Failed	10m 39s	View ↗

☁️ Nx Cloud last updated this comment at 2026-01-27 14:55:46 UTC

coderabbitai · 2026-01-26T15:13:56Z

📝 Walkthrough

Walkthrough

A conditional transform optimization in the viewport component that applies CSS scale transforms only when the scale value differs from 1, using 'none' for scale of 1 instead of a no-op transform.

Changes

Cohort / File(s)	Summary
Viewport scale transform optimization `code/core/src/manager/components/preview/Viewport.tsx`	Changed scale transform from unconditional `transform: scale(${scale})` to conditional application; applies transform only when scale ≠ 1, otherwise sets transform to 'none'

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

storybookjs/storybook#33557: Also modifies Viewport.tsx to adjust how scale is handled in dimension and frame calculations, indicating concurrent work on viewport scaling behavior.

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

storybook-app-bot · 2026-01-26T15:22:36Z

Package Benchmarks

^{Commit: 42de033, ran on 26 January 2026 at 15:22:31 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	184 KB	🚨 +184 KB 🚨
Dependency size	0 B	2.98 MB	🚨 +2.98 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	0	18	🚨 +18 🚨
Self size	0 B	1.64 MB	🚨 +1.64 MB 🚨
Dependency size	0 B	9.25 MB	🚨 +9.25 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	5 KB	🚨 +5 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-onboarding`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	331 KB	🚨 +331 KB 🚨
Dependency size	0 B	670 B	🚨 +670 B 🚨
Bundle Size Analyzer	Link	Link

`storybook-addon-pseudo-states`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	21 KB	🚨 +21 KB 🚨
Dependency size	0 B	689 B	🚨 +689 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-themes`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-vitest`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	379 KB	🚨 +379 KB 🚨
Dependency size	0 B	338 KB	🚨 +338 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	0	11	🚨 +11 🚨
Self size	0 B	123 KB	🚨 +123 KB 🚨
Dependency size	0 B	1.30 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	75 KB	🚨 +75 KB 🚨
Dependency size	0 B	32.04 MB	🚨 +32.04 MB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	0	49	🚨 +49 🚨
Self size	0 B	20.39 MB	🚨 +20.39 MB 🚨
Dependency size	0 B	16.52 MB	🚨 +16.52 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	139 KB	🚨 +139 KB 🚨
Dependency size	0 B	30.26 MB	🚨 +30.26 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	0	192	🚨 +192 🚨
Self size	0 B	15 KB	🚨 +15 KB 🚨
Dependency size	0 B	28.76 MB	🚨 +28.76 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	1.46 MB	🚨 +1.46 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	0	534	🚨 +534 🚨
Self size	0 B	646 KB	🚨 +646 KB 🚨
Dependency size	0 B	59.53 MB	🚨 +59.53 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	0	123	🚨 +123 🚨
Self size	0 B	1.12 MB	🚨 +1.12 MB 🚨
Dependency size	0 B	22.11 MB	🚨 +22.11 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	13 KB	🚨 +13 KB 🚨
Dependency size	0 B	1.44 MB	🚨 +1.44 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	0	155	🚨 +155 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	23.41 MB	🚨 +23.41 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	0	113	🚨 +113 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	19.91 MB	🚨 +19.91 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	0	274	🚨 +274 🚨
Self size	0 B	24 KB	🚨 +24 KB 🚨
Dependency size	0 B	44.43 MB	🚨 +44.43 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	0	200	🚨 +200 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	33.30 MB	🚨 +33.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	0	19	🚨 +19 🚨
Self size	0 B	55 KB	🚨 +55 KB 🚨
Dependency size	0 B	26.58 MB	🚨 +26.58 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	56 KB	🚨 +56 KB 🚨
Dependency size	0 B	26.63 MB	🚨 +26.63 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	0	108	🚨 +108 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	43.67 MB	🚨 +43.67 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	0	15	🚨 +15 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	1.50 MB	🚨 +1.50 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	0	183	🚨 +183 🚨
Self size	0 B	775 KB	🚨 +775 KB 🚨
Dependency size	0 B	67.55 MB	🚨 +67.55 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	0	176	🚨 +176 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	66.12 MB	🚨 +66.12 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-webpack`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	11 KB	🚨 +11 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	0	50	🚨 +50 🚨
Self size	0 B	1000 KB	🚨 +1000 KB 🚨
Dependency size	0 B	36.91 MB	🚨 +36.91 MB 🚨
Bundle Size Analyzer	node	node

`@storybook/csf-plugin`

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.26 MB	🚨 +1.26 MB 🚨
Bundle Size Analyzer	Link	Link

`eslint-plugin-storybook`

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	131 KB	🚨 +131 KB 🚨
Dependency size	0 B	2.82 MB	🚨 +2.82 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-dom-shim`

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	788 B	🚨 +788 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-create-react-app`

	Before	After	Difference
Dependency count	0	68	🚨 +68 🚨
Self size	0 B	32 KB	🚨 +32 KB 🚨
Dependency size	0 B	5.98 MB	🚨 +5.98 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	0	170	🚨 +170 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	31.29 MB	🚨 +31.29 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	0	10	🚨 +10 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.20 MB	🚨 +1.20 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	29 KB	🚨 +29 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	0	57	🚨 +57 🚨
Self size	0 B	1.23 MB	🚨 +1.23 MB 🚨
Dependency size	0 B	12.95 MB	🚨 +12.95 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	8 KB	🚨 +8 KB 🚨
Dependency size	0 B	716 KB	🚨 +716 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte`

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	45 KB	🚨 +45 KB 🚨
Dependency size	0 B	230 KB	🚨 +230 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	63 KB	🚨 +63 KB 🚨
Dependency size	0 B	211 KB	🚨 +211 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	61 KB	🚨 +61 KB 🚨
Dependency size	0 B	47 KB	🚨 +47 KB 🚨
Bundle Size Analyzer	Link	Link

Core: Fix rendering of View Transitions in Firefox (cherry picked from commit 72cb39f)

Avoid CSS scale transform when not actually scaling

42de033

ghengeveld added bug ci:normal labels Jan 26, 2026

ghengeveld self-assigned this Jan 26, 2026

ghengeveld requested a review from ndelangen January 26, 2026 15:12

ghengeveld mentioned this pull request Jan 26, 2026

[Bug]: Firefox View Transitions render at wrong position in Storybook 10.2.0 #33631

Closed

ghengeveld requested review from valentinpalkovic and removed request for ndelangen January 27, 2026 14:42

valentinpalkovic approved these changes Jan 27, 2026

View reviewed changes

Merge branch 'next' into fix-scale-1

5b37c21

ghengeveld merged commit 72cb39f into next Jan 27, 2026
8 of 10 checks passed

ghengeveld deleted the fix-scale-1 branch January 27, 2026 14:43

github-actions Bot mentioned this pull request Jan 28, 2026

Release: Prerelease alpha 10.3.0-alpha.1 #33621

Merged

14 tasks

dosubot Bot mentioned this pull request Feb 2, 2026

[Bug]: Docs page not full height in Firefox ESR (140.7esr) after 10.2.x update #33743

Open

valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Feb 4, 2026

github-actions Bot mentioned this pull request Feb 4, 2026

Release: Patch 10.2.7 #33775

Merged

6 tasks

valentinpalkovic pushed a commit that referenced this pull request Feb 5, 2026

Merge pull request #33651 from storybookjs/fix-scale-1

e7d1d84

Core: Fix rendering of View Transitions in Firefox (cherry picked from commit 72cb39f)

github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Core: Fix rendering of View Transitions in Firefox#33651

Core: Fix rendering of View Transitions in Firefox#33651
ghengeveld merged 2 commits into
nextfrom
fix-scale-1

ghengeveld commented Jan 26, 2026 •

edited by storybook-bot

Loading

Uh oh!

nx-cloud Bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jan 26, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

storybook-app-bot Bot commented Jan 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ghengeveld commented Jan 26, 2026 • edited by storybook-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

nx-cloud Bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jan 26, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

storybook-app-bot Bot commented Jan 26, 2026

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-docs

@storybook/addon-links

@storybook/addon-onboarding

storybook-addon-pseudo-states

@storybook/addon-themes

@storybook/addon-vitest

@storybook/builder-vite

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/ember

@storybook/html-vite

@storybook/nextjs

@storybook/nextjs-vite

@storybook/preact-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/vue3-vite

@storybook/web-components-vite

@storybook/cli

@storybook/codemod

@storybook/core-webpack

create-storybook

@storybook/csf-plugin

eslint-plugin-storybook

@storybook/react-dom-shim

@storybook/preset-create-react-app

@storybook/preset-react-webpack

@storybook/preset-server-webpack

@storybook/html

@storybook/preact

@storybook/react

@storybook/server

@storybook/svelte

@storybook/vue3

@storybook/web-components

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ghengeveld commented Jan 26, 2026 •

edited by storybook-bot

Loading

nx-cloud Bot commented Jan 26, 2026 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-docs`

`@storybook/addon-links`

`@storybook/addon-onboarding`

`storybook-addon-pseudo-states`

`@storybook/addon-themes`

`@storybook/addon-vitest`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/ember`

`@storybook/html-vite`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/preact-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/web-components-vite`

`@storybook/cli`

`@storybook/codemod`

`@storybook/core-webpack`

`create-storybook`

`@storybook/csf-plugin`

`eslint-plugin-storybook`

`@storybook/react-dom-shim`

`@storybook/preset-create-react-app`

`@storybook/preset-react-webpack`

`@storybook/preset-server-webpack`

`@storybook/html`

`@storybook/preact`

`@storybook/react`

`@storybook/server`

`@storybook/svelte`

`@storybook/vue3`

`@storybook/web-components`