karanlyons · March 20, 2019 01:01
diff --git a/testcase.html b/testcase.html
 <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>
	<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>