fix many bugs

1. iOS safari won't slide bug
2. same history bug
3. iOS7+ swipe prev/next page cause slide problem

Author: zhangxinxu

src/mobilebone.css

@@ -91,38 +91,39 @@ html, body, .page {
 	animation-name: slideinfromleft;
 }
 
+/* keyframes for slidein from sides */
 @-webkit-keyframes slideinfromright {
     from { -webkit-transform: translate3d(100%,0,0); }
     to { -webkit-transform: translate3d(0,0,0); }
 }
 @keyframes slideinfromright {
-    from { transform: translate3d(100%,0,0); }
-    to { transform: translate3d(0,0,0); }
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
 }
 @-webkit-keyframes slideinfromleft {
     from { -webkit-transform: translate3d(-100%,0,0); }
     to { -webkit-transform: translate3d(0,0,0); }
 }
 @keyframes slideinfromleft {
-    from { transform: translate3d(-100%,0,0); }
-    to { transform: translate3d(0,0,0); }
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
 }
 /* keyframes for slideout to sides */
 @-webkit-keyframes slideouttoleft {
     from { -webkit-transform: translate3d(0,0,0); }
     to { -webkit-transform: translate3d(-100%,0,0); }
 }
 @keyframes slideouttoleft {
-    from { transform: translate3d(0,0,0); }
-    to { transform: translate3d(-100%,0,0); }
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
 }
 @-webkit-keyframes slideouttoright {
     from { -webkit-transform: translate3d(0,0,0); }
     to { -webkit-transform: translate3d(100%,0,0); }
 }
 @keyframes slideouttoright {
-    from { transform: translate3d(0,0,0); }
-    to { transform: translate3d(100%,0,0); }
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
 }
 
 /* chrysanthemum loading effect */

src/mobilebone.js

@@ -238,18 +238,22 @@
 		if (pageOut != null && pageOut.classList) {
 			// do transition if there are no 'prevent'
 			if (isPreventOut != true) {
-				pageOut.style.display = "block";
 				pageOut.classList.add("out");
-				pageOut.classList.add(params_out.form);
+				//if (options.animate !== false) {
+					pageOut.classList.add(params_out.form);
+				//}
 				pageOut.classList.remove("in");
 				// if reverse direction
 				pageOut.classList[back? "add": "remove"]("reverse");
+				pageOut.style.display = "block";
+				
 				// do fallback every time
 				var fallback = params_out.fallback;
 				if (typeof fallback == "string") fallback = params_out.root[fallback];
 				if (typeof fallback == "function") fallback.call(params_out.root, pageInto, pageOut, options);
 			}
 		}
+		
 		if (pageInto != null && pageInto.classList) {				
 			// for title change
 			var title = params_in.title, 
@@ -267,34 +271,30 @@
 				// set data-title for first visibie page
 				pageInto.setAttribute("data-title", document.title);
 			}
-			// Fastclick may cause slide bug in iOS8, any innerHTML change can fix it!
-			// issues #80
-			//if (typeof FastClick != "undefined") {
-				var mobilebone = document.querySelector("mobilebone");
-				if (mobilebone == null) {
-					mobilebone = document.createElement("mobilebone");
-					mobilebone.style.position = "absolute";
-					mobilebone.style.clip = "rect(0 0 0 0)";
-					document.body.appendChild(mobilebone);
-				}
-				mobilebone.innerHTML = mobilebone.innerHTML.replace('11', '') + '1';
-			//}			
-			
+						
 			// delete page with same id when options.remove !== false
 			var pageid = options.id || pageInto.id;
 
 			if (options.remove !== false && store[pageid] && store[pageid] != pageInto && store[pageid].parentElement) {
 				store[pageid].parentElement.removeChild(store[pageid]);
 				delete store[pageid];
 			}
-	
+			
 			// do transition
-			pageInto.style.display = "block";
+			if (pageOut)  pageInto.classList.add(params_in.form);
+			// iOS bug 
+			// reflow for fixing issues #80, #86
+			pageInto.offsetWidth = pageInto.offsetWidth;
+			// go~ as normal
 			pageInto.classList.remove("out");
 			pageInto.classList.add("in");
-			pageOut && pageInto.classList.add(params_in.form);
+						
 			// if reverse direction
 			pageInto.classList[back? "add": "remove"]("reverse");
+			pageInto.style.display = "block";
+		
+			
+			//console.log(pageInto.className);
 
 			// do callback when come in first time
 			var onpagefirstinto = params_in.onpagefirstinto;
@@ -347,16 +347,15 @@
 
 			if (supportHistory && this.pushStateEnabled && options.history !== false && url_push 
 				// hash should be different
+				// can fix issues #79, #87 maybe
 				&& url_push_replaced != location.hash
 			) {
 				// don't trigger 'popstate' events
 				history.popstate = false;
 				// if only pageIn, use 'replaceState'
 				history[pageOut? "pushState": "replaceState"](null, document.title, url_push.replace(/^#/, "#&"));
 			}
-			// reset to popable state
-			history.popstate = true;
-
+			
 			// store page-id, just once
 			if (!store[pageid]) {
 				store[pageid] = pageInto;
@@ -367,6 +366,13 @@
 
 			if (typeof callback == "string") callback = params_in.root[callback];
 			if (typeof callback == "function") callback.call(params_in.root, pageInto, pageOut, options);
+			
+			// Safari do 'popstate' after 'pushState/replaceState'
+			// So, we neet setTimeout to avoid excuting 'Mobilebone.transition()' twice
+			setTimeout(function() {
+				// reset to popable state
+				history.popstate = true;	
+			}, 17);
 		}
 	};
 
@@ -861,15 +867,27 @@
 				});		
 			}
 		}
-				
+		// Important: 
+		// In ios7+, swipe the edge of page will navigate Safari
+		// that will trigger 'popstate' events and the page will transition twice
+		var isSafari7 = !!navigator.userAgent.match(/safari/i) && !navigator.userAgent.match(/chrome/i) && typeof document.hidden !== "undefined" && !window.chrome;
+		if ('ontouchstart' in window == true) {
+			document.addEventListener("touchmove", function() {
+				history.popstateswipe = true;	
+			});	
+			document.addEventListener("touchend", function() {
+				history.popstateswipe = false;	
+			});
+		}
+		
 		// change flag-var for avoiding repeat init
 		hasInited = true;
 	};
 
 	/**
 	 * If 'a' element has href, slide auto when tapping~
 	**/
-	Mobilebone.handleTapEvent = function(event) {
+	Mobilebone.handleTapEvent = function(event) {		
 		/**
 		// iscroll(set tap: true) may cause twice tap problem 
 		// which is none of Mobilebone's business
@@ -896,7 +914,7 @@
 		var self_page = document.querySelector(".in." + Mobilebone.classPage);
 
 		if (self_page == null || !target) return;
-		
+
 		// optional params for Mobilebone.transition
 		var options = {
 			target: target	
@@ -950,6 +968,8 @@
 		// 3. cros, or not capture (except data-ajax="true")
 		if (!href) return;
 
+		href = href.replace("#&", "#");
+		
 		if (target.getAttribute("href").replace(/#/g, "") === "") {
 			event.preventDefault();
 			return;
@@ -1049,7 +1069,11 @@
 	 * page change when history change
 	**/
 	window.addEventListener("popstate", function() {
-		
+		if (history.popstateswipe == true) {
+			location.reload();
+			history.popstateswipe = false;
+			return;
+		}
 		if (history.popstate == false) {
 			history.popstate = true;
 			return;
@@ -1090,6 +1114,7 @@
 			});
 		}
 	});
-	
+		
 	return Mobilebone;
 });
+

test/base-slide/index.html

@@ -11,18 +11,24 @@
 <body>
 <div id="pageHome" class="page out">
     <ul>
-        <li><a href="#page1">页面1</a></li>
-        <li><a href="#page2">页面2</a></li>
+        <li><a href="#&page1">页面1-#&amp;page1</a></li>
+        <li><a href="#page2">页面2-#page2</a></li>
         <li><a href="#page3">页面3</a></li>
     </ul>
     <ul>
         <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
+        <li id="result"></li>
     </ul>
 </div>
-<div id="page1" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回1</a></div>
-<div id="page2" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回2</a></div>
-<div id="page3" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回3</a></div>
+<div id="page1" class="page out"><a href="#&pageHome" data-rel="back">&laquo;返回1</a></div>
+<div id="page2" class="page out"><a href="#&pageHome" data-rel="back">&laquo;返回2</a></div>
+<div id="page3" class="page out"><a href="#&pageHome" data-rel="back">&laquo;返回3</a></div>
 
 <script src="../../src/mobilebone.js"></script>
+<script>
+console.log = function(content) {
+	document.getElementById("result").innerHTML += '<p>'+ content +'</p>';
+};
+</script>
 </body>
 </html>