[joselrio]

Issue number: N/A

---

What is the current behavior?

In the ionic theme with title-placement="center", the toolbar centers the title by measuring the start/end (and primary/secondary) slots and writing the widest one to --start-end-size / --primary-secondary-size. Until then the slots have a flex-basis of 0.

The measurement runs in a setTimeout and retries every 100 ms, up to 5 times, while a slot measures 0. This causes:

• The title jumps after the first paint. The first frame is laid out with collapsed slots, so the title is off-center (or wraps differently) until the timeout runs.
• Hidden toolbars are never measured. If the toolbar is hidden for longer than the retries (e.g. a page that is still being navigated to), the slots never get a size.
• Content changes are not re-measured. The onSlotchange handlers return this.updateSlotClasses instead of calling it, and buttons added to or removed from an existing ion-buttons don't fire slotchange at all.
• Slots never shrink. The slot itself is measured, and once the size property is set the slot can't be narrower than it, so removing content never gives the space back to the title.

What is the new behavior?

• The slotted elements are watched with a ResizeObserver instead of being measured in a setTimeout. Its callback runs after layout and before paint, so the slot sizes are set in the same frame the content is first laid out: the title is centered on the first painted frame. It also runs again whenever the slotted content changes size or a hidden toolbar becomes visible.
• The size properties are removed right before the slots are measured, so the slots are measured at the width of their content and shrink when their content does.
• The onSlotchange handlers now call updateSlotClasses().
• The observer is stopped when the toolbar is removed from the DOM or the title placement is no longer center, and started again if the toolbar is added back.
• Browsers without ResizeObserver measure once.

Does this introduce a breaking change?

• Yes
• No

Other information

Review focus

• Timing in updateSlotWidths(): the first measurement comes from the observer's initial notification, which is delivered before the first paint.
• measureAndUpdateSlots() removes the size properties before measuring the slots. The image handling (--*-size: auto while measuring) is unchanged.
• The connectedCallback / disconnectedCallback handling of the observer.

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Nov 9, 2026 12:43pm UTC

[ShaneK]

Looks good to me, solid fix! I left a test suggestion and a few comment nits.

[ShaneK]

Looks good to me! Just a couple of small readability nits on the latest changes, nothing that needs to hold this up.

[ShaneK]

Nit: I think the new getSlottedElements() helper could absorb the other copies of this lookup. The slot list is now in three methods and the slot[name=...] query is repeated in a couple more, so if someone later edits one list and misses another, the observer ends up watching different elements than the ones being measured. A slotNames field next to slotClasses and a small getSlotElement(slotName) helper would cover all of them, and the toolbar tests still pass with that. Most of this predates your PR though, so no worries if you'd rather leave it!

[ShaneK]

Nit: Could we call this didLoad? That's what ion-item, ion-menu and a few others use for the same guard, so it'd show up when someone searches for it. This is an extremely minor nit, just a basic consistency thing, so it's up to you