I am currently working on creating a custom shimmer loader using CSS3 keyframes animation within the shadow DOM. While the shimmer effect displays perfectly in Chrome and Safari, it seems to be malfunctioning in Firefox.
Below is a concise snippet that demonstrates this issue:
document.getElementById('myDiv').attachShadow({mode:'open'}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat !important;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
@keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`<!DOCTYPE html>
<html dir="ltr" lang="en">
<head></head>
<body>
<div id="myDiv"></div>
</body>
</html>