fix(transition): make large title animations work in every theme

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

The iOS large title animations rely on the iOS theme's title stylesheet, so they only look right in the iOS theme. With iOS mode and the md or ionic theme, the page transition squashes the title (width scale 0.20 instead of about 0.5), a centered title jumps to the screen edge, and the overscroll stretch slides the title 17px past its padding.

What is the new behavior?

• The iOS page transition sets up what it needs itself: it measures the title's text, copies the title's color, font and padding to its copy, starts both copies where the text is rendered so a centered title morphs in place, and hides the back button with visibility so a title placed next to it doesn't shift.
• The header stretch sets its own transform origin from the title's text alignment.
• Removes the title's animation-only tokens and the cloned title rule, which nothing reads anymore.
• Fixes the ionic toolbar briefly showing a centered title off-center while the back button renders.
• Adds a title transition test page.

This is the first proof of concept for FW-7295: animations set up what they need instead of relying on a theme's stylesheet.

Does this introduce a breaking change?

• Yes
• No

Other information

How to test: open the before and after links side by side, starting at the top of the page.

• Transition: tap "Go (matching back text)", then the back button. The other Go buttons, Cycle title color, Open in modal and Open in tabs should behave the same way.
• Stretch: pull down at the top of the page. This needs real overscroll, such as Safari with a trackpad or the iOS Simulator.

Check	Before	After	What to look for
Transition, ionic theme	before	after	Before, the centered title jumps to the edge and squashes. After, it morphs from where it is into the back button
Transition, md theme	before	after	Before, there's no morph. After, the title morphs into the back button
Transition, ios theme	before	after	Same on both, except a colored title now keeps its color while it moves
Toolbar centering	before	after	Before, "Message" starts right of center for a moment. After, it's centered from the start
Stretch, md theme	before	after	Before, the title's left edge slides out past its padding. After, it stays put
Stretch, md theme, RTL	before	after	Same as above, on the right edge
Stretch, ios theme	before	after	Same on both
Stretch, ionic theme	before	after	Same on both

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 10, 2026 2:34am UTC