Fix for iOS title bounce

Ionic Framework
1

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:

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

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

3

Screen capture is here: 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:

4

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?

5

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.

6

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.

7

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.

8

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?