# \[solved\] Page transition animation has artifacts of header/navbar

**URL:** <https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475>\
**Category:** ionic-v1\
**Created:** [February 28, 2014, 2:32pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475 "2014-02-28T14:32:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![guyz](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guyz](https://forum.ionicframework.com/u/guyz)\
**Post date:** [February 28, 2014, 2:32pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/1 "2014-02-28T14:32:07Z")

</div>

The navigation between pages by default has a slide/shrink & slide (i dunno what to call it); but anyways, what happens is the navbar “pops” on top of my current view, then the rest of the view for that page slides in.

For example if I’m on a page that is completely white with no header/footer. Just a blank view. And the page I want to navigate to has a red header, green content and blue footer:

The white page gets the red header from the new page, then the rest (green/blue) of the page slides in to match. And when going back to the white page, the red header gets replaced by the blue footer and then the white slides in over everything.

The best I can guess is the `ion-nav-bar` is only getting a visibility treatment applied with no transition/animation.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [February 28, 2014, 4:02pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/2 "2014-02-28T16:02:43Z")

</div>

Can you post a code sample or Screen shot or a GIF?

---

<div class="post-metadata">

**Author:** ![guyz](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guyz](https://forum.ionicframework.com/u/guyz)\
**Post date:** [February 28, 2014, 5:21pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/3 "2014-02-28T17:21:43Z")

</div>

It’s almost impossible for me to capture a screen shot since it happens quite quickly. And I’d be spending way too much time trying to learn to make animated gif in photoshop. But let me try and simplify it down to just the header element.

Landing page, is just white with no header, no footer and a link to a secondary page that contains a black background and red header. (so it’s a big white box)

What happens when i click the link is; the red header from the secondary page appears. (for a fraction of a second it looks like the header is part of the white page). So now we have a white page with the header from page 2. Then the black section transitions over the white to complete the look. (So the nav bar does not animate, but the page content does animate).

I’m using this default navbar in the index.html

```
<body>
<ion-nav-bar type="bar-positive" 
                 animation="nav-title-slide-ios7" 
                 back-button-type="button-icon button-clear" 
                 back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

```

Followed by the white page:

```
<ion-view has-header="true" hide-nav-bar="true" has-tabs="false" padding="true">
  <ion-content>

```

And `hide-nav-bar="false"` on the black page.

---

<div class="post-metadata">

**Author:** ![guyz](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guyz](https://forum.ionicframework.com/u/guyz)\
**Post date:** [February 28, 2014, 6:58pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/4 "2014-02-28T18:58:30Z")

</div>

It seems that any elements outside of the `<ion-view>` will present the issue of not being animated during the slide transition. Including the default use case of `<ion-nav-bar>` being contained on the index page.

So the nav-bar will never animate, it just shows/hides. And when going from a screen with no nav bar, to one with a nav bar; the artifact will always present itself for that small duration.

I’ve done a walk-around with WET (write everything twice) coding by copy/pasting a custom nav bar to each view.

---

<div class="post-metadata">

**Author:** ![allanos83](https://avatars.discourse-cdn.com/v4/letter/a/8491ac/32.png) [@allanos83](https://forum.ionicframework.com/u/allanos83)\
**Post date:** [January 29, 2015, 12:57am UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/5 "2015-01-29T00:57:26Z")

</div>

I have this same exact problem, any ideas on how to fix this? pls help! I am using ionic 1.3.2

---

<div class="post-metadata">

**Author:** ![artemdemo](https://avatars.discourse-cdn.com/v4/letter/a/5fc32e/32.png) [@artemdemo](https://forum.ionicframework.com/u/artemdemo)\
**Post date:** [February 22, 2015, 12:45pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/6 "2015-02-22T12:45:46Z")

</div>

I solved it by adding pseudo class :before to the ion-view

```
ion-view.pane:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: red;
}

```

Work perfect for me.

---

<div class="post-metadata">

**Author:** ![leocreo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/leocreo/32/80170_2.png) [@leocreo](https://forum.ionicframework.com/u/leocreo)\
**Post date:** [March 11, 2015, 7:55pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/7 "2015-03-11T19:55:44Z")

</div>

Nice solution.  
Even better I solved following @artemdemo solution, but setting background color to entire view that match header color. Then all background goes with that color, but it can be fixed setting white color (or preferred background color) to the “ion-content” by CSS.  
Works!

---

<div class="post-metadata">

**Author:** ![cgwennael](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@cgwennael](https://forum.ionicframework.com/u/cgwennael)\
**Post date:** [August 12, 2015, 10:37pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/8 "2015-08-12T22:37:50Z")

</div>

Hi Leocreo,

Can you explan your css code solution ? I’m not sure to undestrand 🙂

---

<div class="post-metadata">

**Author:** ![unclejam](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unclejam](https://forum.ionicframework.com/u/unclejam)\
**Post date:** [November 19, 2015, 11:21pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/9 "2015-11-19T23:21:25Z")

</div>

Hey guys I am still having this issue as well and not sure what the css solution is. It seems like a major problem that you can’t go from a page with no header to a page with a header without problems. Otherwise I just have to always have a header of the same color??

---

<div class="post-metadata">

**Author:** ![vhoxha08](https://avatars.discourse-cdn.com/v4/letter/v/4491bb/32.png) [@vhoxha08](https://forum.ionicframework.com/u/vhoxha08)\
**Post date:** [March 18, 2016, 5:05pm UTC](https://forum.ionicframework.com/t/solved-page-transition-animation-has-artifacts-of-header-navbar/1475/10 "2016-03-18T17:05:12Z")

</div>

Apply style top: 44px to `<ion-content>` of your view without header. Then sliding becomes purely horizontal.