Last active
August 23, 2019 18:27
-
-
Save nolanlawson/63329cc2ec42e3e32f88c03f99175c2e to your computer and use it in GitHub Desktop.
Repro spinner rAF recalc issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang=""> | |
<head> | |
<title>Repro spinner recalc on rAF</title> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<link rel="stylesheet" href="minimal.css"> | |
</head> | |
<body> | |
<h1>Repro spinner recalc on rAF</h1> | |
<button id="toggleButton" | |
style="font-size:18px;padding:10px;margin:10px;cursor:pointer;"> | |
Run rAF | |
</button> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
<div class="slds-spinner_container"> | |
<div class="slds-align--absolute-center slds-p-top--large"> | |
<div class="slds-spinner slds-spinner--medium slds-spinner--brand" role="status"> | |
<div class="slds-spinner__dot-a"></div> | |
<div class="slds-spinner__dot-b"></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
<script src="script.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.slds-spinner:before, .slds-spinner:after, .slds-spinner__dot-a:before, .slds-spinner__dot-b:before, .slds-spinner__dot-a:after, .slds-spinner__dot-b:after { | |
content: ''; | |
position: absolute; | |
animation-duration: 1000ms; | |
animation-iteration-count: infinite; | |
transform: translate3d(0, 0, 0); | |
will-change: transform | |
} | |
.slds-spinner_medium.slds-spinner:before, .slds-spinner_medium .slds-spinner__dot-a:before, .slds-spinner_medium .slds-spinner__dot-b:before, .slds-spinner--medium.slds-spinner:before, .slds-spinner--medium .slds-spinner__dot-a:before, .slds-spinner--medium .slds-spinner__dot-b:before { | |
animation-name: dotsBounceBefore-medium; | |
top: -.25rem; | |
left: -.25rem | |
} | |
.slds-spinner_medium.slds-spinner:after, .slds-spinner_medium .slds-spinner__dot-a:after, .slds-spinner_medium .slds-spinner__dot-b:after, .slds-spinner--medium.slds-spinner:after, .slds-spinner--medium .slds-spinner__dot-a:after, .slds-spinner--medium .slds-spinner__dot-b:after { | |
animation-name: dotsBounceAfter-medium; | |
top: -.25rem; | |
right: -.25rem | |
} | |
@keyframes dotsBounceBefore-medium { | |
0% { | |
transform: translate3d(0, 0, 0) | |
} | |
60% { | |
transform: translate3d(0, 0, 0); | |
animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) | |
} | |
80% { | |
transform: translate3d(-0.5rem, 0, 0); | |
animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43) | |
} | |
100% { | |
transform: translate3d(0, 0, 0) | |
} | |
} | |
@keyframes dotsBounceAfter-medium { | |
0% { | |
transform: translate3d(0, 0, 0) | |
} | |
60% { | |
transform: translate3d(0, 0, 0); | |
animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) | |
} | |
80% { | |
transform: translate3d(0.5rem, 0, 0); | |
animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43) | |
} | |
100% { | |
transform: translateX(0) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
'use strict' | |
var runningRaf = false | |
var onRaf = function () { | |
if (!runningRaf) { | |
return | |
} | |
requestAnimationFrame(onRaf) | |
} | |
requestAnimationFrame(onRaf) | |
document.getElementById('toggleButton').addEventListener('click', function (e) { | |
if (!runningRaf) { | |
runningRaf = true | |
requestAnimationFrame(onRaf) | |
e.target.innerHTML = 'Disable rAF' | |
} else { | |
runningRaf = false | |
e.target.innerHTML = 'Run rAF' | |
} | |
}) | |
})() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment