Encountering an issue with the pulse animation in Microsoft Edge. Allow me to explain my objective: I have an animated pulsing dot (changing width and height) positioned in the center of a website. The animation works perfectly everywhere except in Edge, where the dot seems to disappear briefly while animating.
HTML SNIPPET
<div class="wrapper__index">
<a href="#hello"><img id="dot" class="wrapper__dot" src="images/pulsing_dot.svg" alt="Click to enter site"></a>
</div>
CSS SNIPPET
.wrapper__index {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#dot {
align-self: center;
max-width:100%;
max-height:100%;
}
/****Dot animation*/
@keyframes pulse {
from {
width: 70px;
height: 70px;
}
to {
width: 90px;
height: 90px;
}
}
#dot {
animation: pulse 1200ms ease-in-out infinite alternate;
}