2

I am building a Single Page Application and I am using position absolute on my views (pages) in order to achieve page transitions while I navigate to different pages. I am using css animations and the effect I am after is one page to slide out to the right and at the same time the next page to slide in from the left.

This works fine as it is, but the problem is that most mobile browsers render the absolute positioned elements as a different layout and this has a negative effect on performance.

I wonder if there is an alternative to absolute positioning in order to achieve the effect I described above. I have tried to use display: flex and float: left, but could not achieve the same effect.

Check a very basic example of what I am doing:

@-webkit-keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
    from { }
    to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
    from { }
    to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
.moveFromLeft {
    -webkit-animation: moveFromLeft .7s ease both;
    animation: moveFromLeft .7s ease both;
}

.moveToRight {
    -webkit-animation: moveToRight .7s ease both;
    animation: moveToRight .7s ease both;
}

html,
body,
.page-container {
    height: 100%;
    position: relative;
    width: 100%;
}

.page {
    height: 400px;
    color: #FFF;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    display: none;
}
.page.active {
    display: block;
    left: 0;
}
.page1 {
    background: #000;
}
.page2 {
    background: #0F0;
}

Fiddle

Roumelis George
  • 6,602
  • 2
  • 16
  • 31
  • related : [Responsive horizontal page scrolling](http://stackoverflow.com/questions/24414642/responsive-horizontal-page-sliding) – web-tiki Dec 31 '14 at 13:27
  • Just added `overflow: hidden;` to the body pretty much, and mobile seems to like it just fine: http://jsfiddle.net/1oab1dea/ – Chad Dec 31 '14 at 15:08
  • The problem is not the horizontal scrolling. In my application I hide the exiting page anyway. My question is about an alternative to position absolute for the page transition effect. – Roumelis George Dec 31 '14 at 19:20

0 Answers0