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

[kaigothe]

I have the same problem:
Safari: 13.1 (14609.1.20.111.8)
macOS: 10.14.6

[asolis]

Growing spinners show as blank in Bootstrap v4.4.x, v4.3.x, and v4.2.x aren't displayed in MacOSX/Safari.

The issue is present in:
MacOSX ( High Sierra 10.13.6) with Safari (v13.1)
MacOSX ( Catalina 10.15.4) with Safari (v13.1)

*They do display correctly in both MacOSX versions using
Chrome (Version 80.0.3987.163 (Official Build) (64-bit))

While looking at the generated @keyframe spinner-grow CSS rule in Bootstrap v4.4, v4.3, and v4.2 .
They currently display the following:

@keyframes spinner-grow {
 0% {
      -webkit-transform: scale(0);
      transform: scale(0);
 }
 50% {
     opacity: 1; 
 }
}

Adding transform:scale(1) at 50% fixes the issue.

@keyframes spinner-grow {
 0% {
      -webkit-transform: scale(0);
      transform: scale(0);
 }
 50% {
     opacity: 1; 
     -webkit-transform: scale(1);
      transform: scale(1);
 }
}

The proposed changes were tested successfully under the mentioned MacOSX / Safari and Chrome version mentioned before. Below codepen reduced test case:

CodePen Reduced Test Case

[mdo]

No need to further tests or anything, there's been a PR open for a bit now :). See #30504.

[kevin8479]

FYI--
IpadOS 13.4 and 13.4.1 has the problem.
IPadOS 13.3 and 13.3.1 does not have the problem.
Andrés's code pen above displays correctly tested under 13.4

[aisml]

issue persists on safari Version 14.0 (15610.1.28.1.9, 15610)

[sharifyounes]

I just added the following to my CSS. It's based on @asolis suggestion above, but it doesn't "stick" at the end on Safari:

@keyframes spinner-grow {
 0% {
      -webkit-transform: scale(0);
      transform: scale(0);
 }
 40% {
     opacity: 1;
     -webkit-transform: scale(.5);
      transform: scale(.5);
 }
 80% {
     opacity: .4;
     -webkit-transform: scale(1);
      transform: scale(1);
 }
}

[DrJume]

Using a previously affected old version of bootstrap v4, this issue has been fixed by updating to iOS 15.4