Growing spinners show as blank in Safari

[ryanditjia]

Steps to reproduce:
Using OS / browsers listed below, insert .spinner-grow in your project, or visit Boostrap’s growing spinner doc.

macOS Catalina 10.15.4
Safari 13.1 / Safari Technology Preview 13.2

[XhmikosR]

@MartijnCuppens can you reproduce?

[MartijnCuppens]

Nope, not in Safari 13.0. Don't have a 13.1 available

[XhmikosR]

It seems BrowserStack only has Safari 13.0.2 on Catalina, so I can't reproduce either.

[chr1stianC]

I can reproduce the issue on Safari 13.1 on Catalina 10.15.4.
The developer's console element inspector shows the spinner growing in 3 steps, but doesn't visually show it.

Btw: Safari 13.1 shows the "-webkit-animation" rule crossed out and the "animation" rule is applied. Does this apply to Safari 13.1 only?

[XhmikosR]

Can someone test these?

• https://v4-dev--twbs-bootstrap.netlify.com/docs/4.4/components/spinners/#growing-spinner
• https://twbs-bootstrap.netlify.com/docs/4.3/components/spinners/#growing-spinner

[ysds]

I could reproduce... (4.3.1, v4-dev and latest)

[XhmikosR]

Btw: Safari 13.1 shows the "-webkit-animation" rule crossed out and the "animation" rule is applied. Does this apply to Safari 13.1 only?

That's probably because they support the unprefixed property in the new version (is my guess, at least).

That being said, I personally don't have any Apple machines to test. So, I can't tell if it's a browser issue or if there's something we could do ourselves. If it's a browser issue, someone should report it.

[MartijnCuppens]

Might be caused by the missing 100% state of the spinner-grow animation. @ysds, could you check that?

Might be worth re-adding that state if it fixes the issue.

[ysds]

I added a 100% timing but no effects the opacity. It seems a safari issue.

[ysds]

Of course I toggled my reduce motion setting but no effects.

[MartijnCuppens]

Of course I toggled my reduce motion setting but no effects.

First thing I tried too 😛

Weird that the spinners do work