[wp-trac] [WordPress Trac] #46684: Site Health: the ellipsis CSS keyframe animation doesn't work in all browsers

[WordPress Trac]

#46684: Site Health: the ellipsis CSS keyframe animation doesn't work in all
browsers
------------------------------+-------------------------
 Reporter:  afercia           |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  5.2
Component:  Administration    |    Version:  trunk
 Severity:  normal            |   Keywords:  needs-patch
  Focuses:  coding-standards  |
------------------------------+-------------------------
 Splitting this out from
 https://core.trac.wordpress.org/ticket/46573#comment:59

 The "ellipsis" CSS keyframe animation (used on the health score indicator
 while the score is being calculated) works only in webkit and Firefox:
 doesn't work in Edge and IE11.

 Turns out `content` isn't one of the CSS [https://developer.mozilla.org
 /en-US/docs/Web/CSS/CSS_animated_properties animatable properties]. The
 fact it works in webkit and Firefox is non-standard and not guaranteed to
 work in the future.

 There are alternative CSS techniques
 [https://stackoverflow.com/questions/13014808/is-there-anyway-to-animate-
 an-ellipsis-with-css-animations (a few examples here)], but they somehow
 rely on the font metrics and on animating the width of the "dots"
 container. I've tried one of them but WordPress uses system fonts so the
 rendering is different on different operating systems. The width varies
 and those techniques seem unreliable.

 Though minor, I don't see a good reason why WordPress should release new
 code with features that don't work in all the officially supported
 browsers.

 I'd suggest to use a different animation. It doesn't necessarily needs to
 display "dots".

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46684>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform