Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Last active August 23, 2019 18:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/63329cc2ec42e3e32f88c03f99175c2e to your computer and use it in GitHub Desktop.
Save nolanlawson/63329cc2ec42e3e32f88c03f99175c2e to your computer and use it in GitHub Desktop.
Repro spinner rAF recalc issue
<!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>
.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)
}
}
(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