Still able to scroll horizontally with offcanvas menu in Firefox
Question
I'm creating a responsive website with an "off-canvas" menu for resolutions less than 640 pixels. I'm making the menu accessible by applying one of two classes to the outer container div, both with css animations which slide all the content left or right with translateX . This works perfectly in Chrome and Safari (haven't tested IE yet), but Firefox adds a horizontal scroll which enables me to scroll from the menu to the content that is supposed to be pushed, but for 10%, out of the screen to the right. Applying overflow-x: hidden or just overflow: hidden to a parent div seems the logical solutions, but this renders my off canvas menu invisible. Does anybody know a fix?
Here is a Fiddle that has most of my code. I had to tweak it a bit in order to make it work on jsFiddle, so the first click on the pink box is fault but after that it works. However, in the Fiddle the problem appears on every browser, even Chrome and Safari. This does not happen outside jsFiddle.
For those who want to check all the code. It's listed below:
HTML & JQUERY
<!DOCTYPE html>
<html>
<head>
<title>Off canvas menu</title>
<link rel="stylesheet" href="offcanvas.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body class="loading">
<div class="wrapper">
<div class="inner-wrapper">
<header>
<div class="topheader">
<div class="menu-icon"></div><!-- /.menu-icon -->
</div><!-- /.topheader -->
<nav>Link</nav>
<div class="search"></div><!-- /.search -->
</header>
<div class="content" role="main">
<div class="banner"></div><!-- /.banner -->
<div class="left"></div><!-- /.left -->
<div class="center"></div><!-- /.center -->
<div class="right"></div><!-- /.right -->
</div><!-- /.content -->
</div><!-- /.inner-wrapper -->
</div><!-- /.wrapper -->
</body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$('.menu-icon').click(function() {
if($('body').hasClass('loading')) {
$('body').removeClass('loading');
$('body').addClass('slideOpen');
} else if($('body').hasClass('slideClosed')) {
$('body').removeClass('slideClosed');
$('body').addClass('slideOpen');
} else {
$('body').removeClass('slideOpen');
$('body').addClass('slideClosed');
}
});
</script>
</html>
CSS
* {
border-box: box-sizing;
}
html, body {
margin: 0;
/*overflow-x: hidden;*/
padding: 0;
}
.inner-wrapper {
/*overflow-x: hidden;*/
position: relative;
}
header {
width: 100%;
}
.topheader {
background: #fff;
height: 30px;
width: 100%;
}
header .menu-icon {
background: #e41e7b;
display: none;
height: 30px;
width: 30px;
}
nav {
background: #404040;
height: 65px;
width: 100%;
}
.search {
background: #dbdbdb;
height: 45px;
width: 100%;
}
.content {
background: silver;
height: 1500px;
position: relative;
width: 100%;
}
.banner {
background: url('http://placekitten.com/1000/300');
background-size: cover;
background-position: center;
height: 300px;
left: 20%;
position: absolute;
width: 60%;
}
.left {
background: burlywood;
height: 1500px;
left: 0px;
position: absolute;
width: 20%;
}
.right {
background: chocolate;
height: 1500px;
left: 80%;
position: absolute;
width: 20%;
}
.center {
background: antiquewhite;
height: 1200px;
left: 20%;
position: absolute;
top: 300px;
width: 60%;
}
@media only screen and (max-width: 1300px) {
.banner {
width: 80%;
}
.right {
height: 1200px;
top: 300px;
}
}
@media only screen and (max-width: 1100px) {
.banner {
left: 0;
width: 100%;
}
.left {
height: 1200px;
top: 300px;
}
}
@media only screen and (max-width: 1024px) {
.left {
width: 30%;
}
.center {
left: 30%;
width: 70%;
}
.right {
height: 500px;
left: 0;
top: 1500px;
width: 100%;
}
}
@media only screen and (max-width: 640px) {
header .menu-icon {
display: block;
}
nav {
height: 1500px;
left: -90%;
position: absolute;
top: 0;
width: 90%;
z-index: 999;
}
.left {
display: none;
}
.center {
left: 0;
width: 100%;
}
}
@keyframes slideOpen {
from { transform: translateX(0); }
to { transform: translateX(90%); }
}
@-webkit-keyframes slideOpen {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(90%); }
}
@keyframes slideClosed {
from { transform: translateX(90%); }
to { tranform: translateX(0); }
}
@-webkit-keyframes slideClosed {
from { -webkit-transform: translateX(90%); }
to { -webkit-tranform: translateX(0); }
}
.slideOpen {
animation: slideOpen .3s ease;
animation-fill-mode: forwards;
-webkit-animation: slideOpen .3s ease;
-webkit-animation-fill-mode: forwards;
}
.slideClosed {
animation: slideClosed .3s ease;
animation-fill-mode: forwards;
-webkit-animation: slideClosed .3s ease;
-webkit-animation-fill-mode: forwards;
}
1 answers
solution1
0 ACCPTED 2013-12-18 14:14:45
Try sliding the wrapper instead of the body: http://jsfiddle.net/3Yjaz/1/
if($('.wrapper').hasClass('slideClosed')) {
$('.wrapper').removeClass('slideClosed');
$('.wrapper').addClass('slideOpen');
} else {
$('.wrapper').removeClass('slideOpen');
$('.wrapper').addClass('slideClosed');
}
CSS:
html, body {
margin: 0;
overflow-x: hidden;
padding: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.