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.

javascriptjquerycsscss-animations

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using `popWin()` in conjunction with `echo php` in Javascript

How can I create a JavaScript popup window inside an echo line? I have tried the following code but the popup window does not work: echo '<td> <a href="javascript:popWin(edit.php?id='.$row[id].')">Edit</a></td>&apos ...

javascriptphpwindow

The count of records in MongoDB by the current month

Recently delving into MongoDB, I found myself in need of a way to retrieve the count of posts made in the current month. Keeping timestamps true in my PlateModel model, it appears as follows: { timestamps: true } The current code snippet in my Controller ...

javascriptnode.jsmongodbexpressmern

Utilize Ajax to showcase MySQL query outcomes upon onClick() event

As a newcomer to Ajax scripts, I am currently working on creating a script that will showcase MySQL query results when a user clicks on a specific link. My approach involves utilizing the onClick() function to trigger an Ajax script. Below is a snippet of ...

ajaxjquery

Utilizing AJAX to send a Zend Form submission

Is there a way to submit a Zend form using an ajax request in jQuery without the page refreshing? I have already tried using ajaxLink with Zend, but I am unsure how to implement it with a form. ...

ajaxzend-frameworkjqueryzend-form

Trouble accessing data property within a method in Vue 3 with Typescript

I am facing an issue with accessing my data in a method I have written. I am getting a Typescript error TS2339 which states that the property does not exist in the type. TS2339: Property 'players' does not exist on type '{ onAddPlayers(): vo ...

javascripttypescriptvue.jsvue-componentvuejs3

dealing with the presentation of options in linked drop-down menus, within an HTML context

Firstly, I apologize for my poorly phrased question. In the process of building a location-based application with Drupal. I have implemented a form that allows users to select their location. The form includes three 'dependent' select elements ...

jqueryajaxdrupalahah

Struggling to create a photo grid design that meets my expectations

I'm struggling to recreate this particular photo grid. Any tips on how I can achieve it? Check out the image here Just to clarify, I had a working prototype see image description using flexbox. However, one image didn't fit well so I resorted to ...

htmlimagecssgridflexbox

Text buttons on the menu are running into each other when displayed on an Android device

After recently completing a redesign of my website, hetoft.com, I am proud to say that I crafted the design and code entirely by hand, with only Dreamweaver as a helpful tool. This was my first experience creating a website with a CSS-based layout, and des ...

androidhtmlcssscalingoverlap

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

javascriptjqueryhtmlcssslick.js

another solution instead of using several try-catch blocks within a function

Consider a scenario where we define a function as shown below: async function doSomethingWithFriends() { let user, friends, friendsOfFriends = null; try { user = await getUser(); } catch(err){ return [401, err] } try { ...

javascriptnode.jsasync-await

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

csshyperlinkunderline

The jQuery "after" function appears to be malfunctioning when used with tables

Looking for help with jQuery to add a div around a table after using a table plugin. I've tried using before/after functions but it's not working as expected. Check out the code here: http://jsfiddle.net/LWXQK/1/ Jquery code: $('#dashboard ...

javascriptjqueryhtml-table

How can I transfer a variable from jQuery to PHP using AJAX?

I am currently working on a form that utilizes PHP to send email notifications for inquiries. Additionally, I have implemented jQuery to automatically populate details into a specific div. Could someone guide me on how to pass the jQuery variable to PHP t ...

phpjqueryajax

How can I integrate NIB into a project created with WebStorm 8 using node.js, Express, Jade, and Stylus?

Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...

javascriptnode.jsexpresswebstormstylus

Internet Explorer experiencing issues with window resizing event

One common issue with Internet Explorer is that the window.resize event is triggered whenever any element on the page is resized. It doesn't matter how the element's size changes, whether it's through height or style attribute modification, ...

javascriptjqueryinternet-explorerresizejquery-events

As each new line is added, the span text starts from the bottom and moves up by one line

I am facing an issue where I want a span to start from the top and expand as the text length increases, but it is currently starting from the bottom and moving upwards. See the image below for reference: View Image <div style="width:70%;margin-left: ...

htmlcss

Having trouble with Ajax POST and CodeIgniter integration?

I have encountered an issue while trying to echo back code received from Ajax. It seems that when I use contentType:false and processData:false, the functionality stops working. Below is the snippet of my ajax code. The url is correct. Interestingly, if I ...

phpjqueryajaxcodeigniter

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

javascriptphpjqueryhtmlcss

Using preventDefault functions correctly on Google Chrome but not functioning as intended on Firefox when applied to the <select> element

Have you tested out this code snippet: http://jsfiddle.net/LNfZT/29/ Interestingly, it functions flawlessly on Chrome but encounters issues on Firefox. Any thoughts on why this might be happening? ...

jquery

Incremental migration to Next.js within the current React application

I'm on a quest to uncover practical examples demonstrating the process of gradually transitioning an existing React application towards Next.js. Despite delving into all available Next.js documentation on incremental adoption strategies like subpaths, ...

javascriptreactjsproxynext.jsnetlify