From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 25 Sep 2016 15:40:27 +0000 (+0200)
Subject: `transform: translateY` on page container causes iOS Safari to snap
X-Git-Tag: 3.0.0_Beta_2~142
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c4e5e6f9a449211decd58385a4e23f526a00b0a3;p=GitHub%2FWoltLab%2FWCF.git

`transform: translateY` on page container causes iOS Safari to snap
---

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
index ec9e726feb..85f768e65b 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
@@ -6,12 +6,13 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLabSuite/Core/Ui/Screen
  */
-define(['Core', 'Dictionary'], function(Core, Dictionary) {
+define(['Core', 'Dictionary', 'Environment'], function(Core, Dictionary, Environment) {
 	"use strict";
 	
 	var _mql = new Dictionary();
 	var _scrollDisableCounter = 0;
-	var _scrollOffsetFrom;
+	var _scrollOffsetFrom = null;
+	var _scrollTop = 0;
 	
 	var _mqMap = Dictionary.fromObject({
 		'screen-xs': '(max-width: 544px)',                              /* smartphone */
@@ -96,14 +97,18 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
 		 */
 		scrollDisable: function() {
 			if (_scrollDisableCounter === 0) {
-				var h = document.body.scrollTop;
+				_scrollTop = document.body.scrollTop;
 				_scrollOffsetFrom = 'body';
-				if (!h) {
-					h = document.documentElement.scrollTop;
+				if (!_scrollTop) {
+					_scrollTop = document.documentElement.scrollTop;
 					_scrollOffsetFrom = 'documentElement';
 				}
 				
-				elById('pageContainer').style.setProperty('transform', 'translateY(-' + h + 'px)');
+				// setting translateY causes Mobile Safari to snap
+				if (Environment.platform() !== 'ios') {
+					elById('pageContainer').style.setProperty('transform', 'translateY(-' + _scrollTop + 'px)', '');
+				}
+				
 				document.documentElement.classList.add('disableScrolling');
 			}
 			
@@ -119,10 +124,13 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
 				
 				if (_scrollDisableCounter === 0) {
 					document.documentElement.classList.remove('disableScrolling');
-					var h = elById('pageContainer').style.getPropertyValue('transform').match(/translateY\(-(\d+)px\)/);
-					elById('pageContainer').style.removeProperty('transform');
-					if (h) {
-						document[_scrollOffsetFrom].scrollTop = ~~h[1];
+					
+					if (_scrollTop) {
+						document[_scrollOffsetFrom].scrollTop = ~~_scrollTop;
+					}
+					
+					if (Environment.platform() !== 'ios') {
+						elById('pageContainer').style.removeProperty('transform');
 					}
 				}
 			}