Inactive properties in keyframes are ignored in iOS

Question

I understand that non-inactive properties are not interpolated in the animation, however I understand that values ​​are at least computed.

So, let's say I want to “revive” the overflow property (which is not animated, that is, not on this list ) from hiddento visible- I would expect the calculated value to change accordingly.

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

This actually 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 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>

Run codeHide result

Codepen Demo

, Chrome Firefox , iOS , , , .

NB:

1) , , iOS

2) , iOS ( ) - , position.

3) , javascript - demo.... CSS.

iOS? ?

Answer 1

:

CSS3,

keyframe Safari 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 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>

Hide result