Non animatable properties within keyframes are ignored on iOS

问题

I understand that non-animatable properties are not interpolated within animations, however, my understanding is that the values are at least (abruptly) computed.

So, for example, let's say I want to 'animate' the overflow property (which is not animatable, i.e. not in this list) from hidden to visible - I would expect that the computed value will change appropriately.

(I tried looking in the spec for this but couldn't find it mentioned explicitly)

This is actually what happens in Chrome and Firefox, but not on iOS.(Safari, iPhone)

.animate {
  border: 5px solid green;
  width: 200px;
  height: 100px;
  animation: 3s resetOverflow;
}
@keyframes resetOverflow {
  from {
    overflow: hidden;
    color: red;
  }
  to { 
    overflow: visible;
    color: green;
  }
}

<div class="animate">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in </div>

Codepen Demo

Notice that on Chrome and Firefox the value for overflow changes from hidden to visible, however on iOS the values for overflow seem to be completely ignored - keeping its default value of visible.

NB:

1) I added animation for the color just to show that animatable properties are working fine in iOS

2) It does seem that iOS ignores all non-animatable properties (not just overflow) - here's another demo which tries to animate the position property.

3) I know that this can be done with javascript - demo.... but I would like to do this with CSS.

Is this a bug in iOS? Any workarounds?

回答1:

Try applying browser prefixes as per following answers:

CSS3 animation not working in safari

keyframe animation does not work on safari for iOS

.animate {
  border: 5px solid green;
  width: 200px;
  height: 100px;
  -webkit-animation: 3s resetOverflow;
  animation: 3s resetOverflow;
}

@-webkit-keyframes resetOverflow {
  from {
    overflow: hidden;
    color: red;
  }
  to {
    overflow: visible;
    color: green;
  }
}

@keyframes resetOverflow {
  from {
    overflow: hidden;
    color: red;
  }
  to {
    overflow: visible;
    color: green;
  }
}

<div class="animate">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in </div>

来源：https://stackoverflow.com/questions/43498896/non-animatable-properties-within-keyframes-are-ignored-on-ios

标签

ios

css

css3

css-animations