CSS3 Animation: Forwards fill not working with position and display on Safari

Question

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.

@-webkit-keyframes impressum-fade-out {
  0% {
    opacity: 1;
    display: block;
    position: relative;
  }
  99% {
    opacity: 0;
    position: relative;
  }
  100% {
    opacity: 0;
    display: none;
    position: absolute;
  }
}

It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...

JSFiddle: http://jsfiddle.net/uhtL12gv/

EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it

Answer 1

As Suggested in the comments, you can adjust the height.

EDIT: Animation Reference Links Added.

• Display property is not animatable.
• Position property is not animatable.
• List of all CSS properties and if and how they are animatable.

$('.block').click(function() { $(this).toggleClass('active') });

@-webkit-keyframes impressum-fade-out {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    height:0;  
  }
}

.block {
  width: 100px;
  height: 100px;
  background: blue;
}

.block2 {
  width: 100px;
  height: 100px;
  background: red;    
}

.block.active {
  -webkit-animation-name: impressum-fade-out;
        animation-name: impressum-fade-out;
  -webkit-animation-duration: 500ms;
        animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>

Answer 2

I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:

JSFiddle

$('.block').one('click', function() {
    var $this = $(this);

    $this.one('webkitTransitionEnd transitionend', function() {
        $this.addClass('block_hidden');
        $this.removeClass('block_transition');
    });

    $this.addClass('block_transition');
});

.block {
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

    .block_2 {
        background: red;    
    }

    .block_transition {
        opacity: 0;
    }

    .block_hidden {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="block"></div>
<div class="block block_2"></div>