Skip to content

Instantly share code, notes, and snippets.

@karanlyons karanlyons/testcase.html
Last active Mar 20, 2019

Embed
What would you like to do?
WebKit RAF Inaccuracy (Related: https://github.com/whatwg/html/issues/2569)
<html>
<head>
<style>
#left, #right, #test {
display: block;
z-index: 0;
}
#left {
float: left;
height: 100px;
width: 200px;
background: #f00;
animation: bounce-left 0.5s linear 0s infinite alternate;
}
@keyframes bounce-left {
from {
margin-top: 0px;
}
to {
margin-top: 50px;
}
}
#right {
float: right;
height: 200px;
width: 200px;
background: #0f0;
animation: bounce-right 0.5s linear 0s infinite alternate;
}
@keyframes bounce-right {
from {
margin-right: 0px;
}
to {
margin-right: 50px;
}
}
#test {
position: fixed;
background: #00f;
z-index: 100;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const test = document.querySelector('#test');
const left = document.querySelector('#left');
const right = document.querySelector('#right');
let parent = left;
document.querySelector('button').addEventListener('click', () => {
parent = parent === left? right : left;
})
reposition = () => {
requestAnimationFrame(reposition);
const rect = parent.getBoundingClientRect();
test.style.cssText = `
top: ${rect.y + window.scrollY}px;
left: ${rect.x + window.scrollX}px;
height: ${rect.height / 2}px;
width: ${rect.width}px;
`;
}
requestAnimationFrame(reposition);
});
</script>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="test"></div>
<button>Toggle</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.