CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

Question

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position and display properties do not set to the final values as intended.

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

The issue seems to be specific to Safari (version 8 was tested), as it works fine on Chrome. It appears that position and display are not functioning properly with animation-fill-mode: forwards...

Check out the JSFiddle demonstration here: http://jsfiddle.net/uhtL12gv/

EDIT For Bounty: While I am aware of workarounds using Javascript and transitionend events, my curiosity lies in understanding why browsers lack support for this behavior. Is it stated in the specification that fillmode forwards does not apply to certain attributes like position, or could this be a bug within the browsers? I have been unable to find relevant information in the bug trackers. Any insights on this matter would be greatly appreciated.

javascript jquery css css-animations

Answer 1

Answer №1

One suggestion from the comments is to modify the height for better results.

UPDATE: Included Links for Animation References.

$('.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

One suggestion from the comments is to modify the height for better results.

UPDATE: Included Links for Animation References.

$('.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 3

Answer №2

If you're looking for a cross-browser solution, I recommend using CSS3 Transitions along with the transitionend event:

Check out this JSFiddle demo

$('.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>

Answer 4

If you're looking for a cross-browser solution, I recommend using CSS3 Transitions along with the transitionend event:

Check out this JSFiddle demo

$('.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>

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

Answer №1

Answer №2

Similar questions

What is the best way to retrieve an array of objects from Firebase?

Is there a discrepancy in height between Chrome's mobile emulator and the iPhone simulator?

jQuery UI Drag and Drop problem with mouse positioning

Tips for eliminating duplicate entries in ag grid using Angular

Switching sub components based on routing through navigation links after logging in

The onclick function is malfunctioning when attempting to use the Windows Phone app in Visual Studio 2015

Leveraging AJAX Post Data in NodeJS using Express

Using inline JavaScript to style an element when clicked

My website layout got messed up because of Chrome version 48

Anticipating the fulfillment of promises with the power of Promises.all

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

Is it possible to use Vuelidate for password validation in Vue.js?

parsing an array using jQuery's getJSON

Is there a way to update the Angular component tag after it has been rendered?

Chrome miscalculates the dimensions of the screen

The issue persists with the addEventListener function not working multiple times

bringing in a js file with an import statement at the beginning

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

Issues arise with animated content when viewed on browsers other than Chrome

When using a Vue.js component, the value of this.$route can sometimes come back