I am currently in the process of developing a unique horizontal animated page transition system which involves scaling the screen to fit the incoming page. However, I have encountered an issue where if the new page is smaller than the previous one, it causes the larger page to overflow outside of my content wrapper, ultimately extending beyond the footer of the page. You can view a screenshot of this problem here.
In the image, you can see how the current page exits on the left side after the screen has resized to accommodate the smaller incoming page, resulting in unwanted white space extending beyond the yellow footer.
Currently, the CSS for my "page" class looks like this:
.myPage
{
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}
I have tried using overflow-y:hidden to solve the issue, but unfortunately, that did not work as intended.
Is there any solution to prevent my page class from extending beyond the content boundaries and causing disruption to my overall page layout?
EDIT:
Below is the code for the page wrapper element:
.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}
Edit2: If you'd like to take a look at all my code, you can find it in this broken jsfiddle: Link to jsfiddle