# Fix for iOS title bounce

**URL:** <https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320>\
**Category:** Ionic Framework\
**Created:** [July 24, 2020, 2:17am UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320 "2020-07-24T02:17:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![aparajita](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aparajita/32/129398_2.png) [@aparajita](https://forum.ionicframework.com/u/aparajita)\
**Post date:** [July 24, 2020, 2:17am UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/1 "2020-07-24T02:17:46Z")

</div>

I’m surprised no one has noticed or reported this, but when a page transitions in, the ion-title in the toolbar bounces at the end of the transition (in WebKit).

I found the culprit, but until it’s fixed in ionic/core, you can fix it by adding this to your CSS:

```auto
ion-header.header-ios ion-toolbar.in-toolbar ion-title {
  -webkit-transition: none;
  transition: none;
}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 24, 2020, 1:18pm UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/2 "2020-07-24T13:18:38Z")

</div>

Do you have a recording/visual example of what you mean?

---

<div class="post-metadata">

**Author:** ![aparajita](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aparajita/32/129398_2.png) [@aparajita](https://forum.ionicframework.com/u/aparajita)\
**Post date:** [July 25, 2020, 4:05am UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/3 "2020-07-25T04:05:38Z")

</div>

Screen capture is here: [https://we.tl/t-aL2kWSuJa3](https://we.tl/t-aL2kWSuJa3)

This is using ionic-vue@0.9. I think these lines of code are the culprit, because it’s the only place I can find a transition being applied to a header title:

> <https://github.com/ionic-team/ionic-framework/blob/bfddb170659224d0f826762744dfe44a85813d36/core/src/components/header/header.utils.ts#L5>

> <https://github.com/ionic-team/ionic-framework/blob/bfddb170659224d0f826762744dfe44a85813d36/core/src/components/header/header.utils.ts#L153>

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 27, 2020, 6:17pm UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/4 "2020-07-27T18:17:16Z")

</div>

I wonder how much of this has to do with Vue, as I am unable to replicate in Angular and React apps.

Can you try to reproduce in an angular or react app?

---

<div class="post-metadata">

**Author:** ![aparajita](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aparajita/32/129398_2.png) [@aparajita](https://forum.ionicframework.com/u/aparajita)\
**Post date:** [July 27, 2020, 9:59pm UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/5 "2020-07-27T21:59:03Z")

</div>

If it is Vue-only, then I’ll just wait until the release Vue version is out to test again. I have a workaround, so it isn’t critical.

---

<div class="post-metadata">

**Author:** ![aparajita](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aparajita/32/129398_2.png) [@aparajita](https://forum.ionicframework.com/u/aparajita)\
**Post date:** [July 28, 2020, 6:53am UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/6 "2020-07-28T06:53:59Z")

</div>

I just discovered that @ionic/vue has @ionic/core@^4.6.0 as a dependency, and that is the version that is being loaded. That probably accounts for why you aren’t seeing it with Angular and React.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 28, 2020, 2:54pm UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/7 "2020-07-28T14:54:16Z")

</div>

Which is why we’ve been telling people to **not** use ionic/vue for production apps yet. It’s beta. Which should have been a clear sign that it is not ready.

---

<div class="post-metadata">

**Author:** ![aparajita](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aparajita/32/129398_2.png) [@aparajita](https://forum.ionicframework.com/u/aparajita)\
**Post date:** [July 28, 2020, 11:02pm UTC](https://forum.ionicframework.com/t/fix-for-ios-title-bounce/193320/8 "2020-07-28T23:02:09Z")

</div>

The beta isn’t that broken. It’s actually way more stable than the release version of the hybrid mobile platform I was using before. I had a choice of using the Vue beta or not using Ionic at all. I’ve already contributed some code to Ionic and have more in the pipeline. Would you rather we use another platform?