Issue with transform: translate3d causing all offcanvas to show on click

HTML & CSS
1

Hi,

I have a menu with 2 offcanvas “push-from-side” menus that are activated on click of a button. I use css transitions to have them slide smoothly from the side upon opening. The menus are fixed and shown/hidden by toggling a class that changes their fixed left position (from -260px to 0px). All this works fine, but as we know css animations can be pretty “non-smooth” in IOS devices. So i googled and someone told me to use:

    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);

However, after adding this to my elements, when I click a button, both menus show, and they are now stacked side by side:S

///MENU1/// ///MENU2/// ///BUTTTON///

When it should be:

///MENU1/// ///BUTTTON///

The menus jquery are separated from each other with ID’s so I have no clue why this is happening.

2

Hi,

I’d need to see a demo to be sure but transforms break fixed positioning when placed on the parent of a fixed element so that may be what’s happening in your case.

e.g. This won’t be fixed.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
	position:fixed;
	top:100px;
	left:100px;
	background:red;
}
.wrap {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}
</style>
</head>

<body>
</body>
<div class="wrap">
		<div class="test">Supposed to be fixed</div>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
		<p>scroll</p>
</div>
</body>
</html>