pguerrant/ios-scroll-bug-2.html Secret

## ios-scroll-bug-2.html
<!DOCTYPE html>
<html>
<head>

    <style>
        #container {
            background: yellowgreen;
            height: 400px;
            width: 400px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        #content {
            background: green;
            height: 200px;
            width: 200px;
            margin: 350px;
        }

        .hidden-y {
            overflow-y: hidden !important;
        }
    </style>

</head>

<body>

<div id="container">
    <div id="content"></div>
</div>

<script>

    (function() {
        var container = document.getElementById('container');
        container.scrollTop = 150;
        container.scrollLeft = 150;

        setTimeout(function() {
            // incorrectly visually resets scrollTop to 0 on screen.
            container.className = 'hidden-y';

            // even though visual scroll position was reset scrollTop is still reported as being 150
            console.log(container.scrollTop);

            setTimeout(function() {
                // try to reset the scroll position back to where it was previously.
                container.scrollTop = 150;

                // Nope! visual position on screen is still wrong.
                // only way to fix the scroll position is to force it to some value other
                // than the original value and then back again.
                container.scrollTop = 0;
                container.scrollTop = 150;
            }, 1000);
        }, 1000);
    })();

</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>

	<style>
	#container {
	background: yellowgreen;
	height: 400px;
	width: 400px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	}

	#content {
	background: green;
	height: 200px;
	width: 200px;
	margin: 350px;
	}

	.hidden-y {
	overflow-y: hidden !important;
	}
	</style>

	</head>

	<body>

	<div id="container">
	<div id="content"></div>
	</div>

	<script>

	(function() {
	var container = document.getElementById('container');
	container.scrollTop = 150;
	container.scrollLeft = 150;

	setTimeout(function() {
	// incorrectly visually resets scrollTop to 0 on screen.
	container.className = 'hidden-y';

	// even though visual scroll position was reset scrollTop is still reported as being 150
	console.log(container.scrollTop);

	setTimeout(function() {
	// try to reset the scroll position back to where it was previously.
	container.scrollTop = 150;

	// Nope! visual position on screen is still wrong.
	// only way to fix the scroll position is to force it to some value other
	// than the original value and then back again.
	container.scrollTop = 0;
	container.scrollTop = 150;
	}, 1000);
	}, 1000);
	})();

	</script>
	</body>

	</html>