| <!DOCTYPE html> |
| <head> |
| <style> |
| #testInner { |
| position: absolute; |
| width: 600px; |
| top: 400px; |
| left: 200px;; |
| padding: 1em; |
| background: yellow; |
| box-shadow: 0 0 0.5em gray; |
| } |
| |
| .marker { |
| position: fixed; |
| background: black; |
| color: white; |
| top: 200px; |
| padding: 1em; |
| } |
| |
| .spacer { |
| height: 200px; |
| } |
| |
| button { |
| position: fixed; |
| top: 100px; |
| left: 200px; |
| padding: 2em; |
| font-size: 16px; |
| font-weight: bold; |
| } |
| |
| .trigger #testInner { |
| -webkit-transform: translateY(-200px); |
| } |
| </style> |
| </head> |
| <body> |
| <button onclick="toggleRunning()"> |
| CLICK ME to start / stop test |
| </button> |
| <div class="marker">Correct top position</div> |
| <div id="parent" class="trigger"> |
| <div id="testInner">test element</div> |
| </div> |
| <p class="spacer">.</p> |
| <p class="spacer">.</p> |
| <p class="spacer">.</p> |
| <p class="spacer">.</p> |
| <p class="spacer">.</p> |
| <p class="spacer">.</p> |
| <p class="spacer" id="last">.</p> |
| |
| <script> |
| var INTERVAL_MS = 17; |
| var testElement = document.getElementById('testInner'); |
| var testContainerElement = document.getElementById('parent'); |
| |
| var state = {}; |
| state.triggerTranslationOnOrOff = false; |
| state.running = false; |
| state.intervalId = 0; |
| |
| function updateState() |
| { |
| var translated = testContainerElement.classList.contains('trigger'); |
| state.scrolled = !translated; |
| } |
| |
| function toggleRunning() |
| { |
| state.running = !state.running; |
| if (state.running) { |
| updateState(); |
| state.intervalId = setInterval(runSequence, INTERVAL_MS); |
| } else { |
| clearInterval(state.intervalId); |
| } |
| } |
| |
| function doExpensiveContentUpdate() |
| { |
| var content = 'I should be stable at the correct position and not flicker above/below'; |
| if (state.scrolled) |
| content += '.'; |
| |
| testElement.innerHTML = content; |
| |
| var lastElement = document.getElementById('last'); |
| var startTime = Date.now(); |
| for (var i = 0; i < 1000; i++) { |
| lastElement.innerHTML = (lastElement.innerHTML + '.'); |
| } |
| var domWriteTimeMs = Date.now() - startTime; |
| if (domWriteTimeMs > 2 * INTERVAL_MS) |
| lastElement.innerHTML = ''; |
| } |
| |
| function runSequence() |
| { |
| doExpensiveContentUpdate(); |
| |
| var newScrollTop; |
| if (state.scrolled) { |
| testContainerElement.classList.add('trigger'); |
| newScrollTop = 0; |
| } else { |
| testContainerElement.classList.remove('trigger'); |
| newScrollTop = 200; |
| } |
| |
| document.body.scrollTop = newScrollTop; |
| state.scrolled = !state.scrolled; |
| } |
| |
| </script> |
| </body> |
| |
