CODEWITHSUNDEEP
javascriptjquerycross-browsertransitiontransitionend
A-Z
A-Z

Reputation: 11

event.originalEvent.propertyName not working in any none Chromium browsers

jQuery

$('body > header').on('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', function(event) { 
                    
    if (event.target && event.originalEvent.propertyName === 'height') {
        console.log('height changed');
    }

});

The CSS is transitioning from height: auto to height: 100% and vise-versa.

This works as expected in Chromium browsers but not in any other browser. In Firefox for example, when I console.log(event.originalEvent.propertyName) before the if parameter I get other property names but never height.

How do I get event.originalEvent.propertyName to return height as Chromium browsers do?

This returns undefined on all browsers:

$('body > header').on('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', function(event) { 
    var evt = event.originalEvent || event;
    if (evt.propertyName === 'height') {
         console.log('height changed');
    }
});

Upvotes: 0

Views: 26

Answers (1)

A-Z
A-Z

Reputation: 11

Currently, some browsers do not support event.originalEvent.propertyName === 'height' when the initial or final CSS property is set to auto. To address this, the best approach is to use CSS's feature detection to apply a static height value for browsers that do not support this behavior. Below is an example implementation:

body > header {
    height: 8.25em;
    transition: height 500ms ease-out;
}

@media only screen and (max-width: 1000px) {

    body > header {
        height: 6.25em;
    }

}

/* Styles for Chromium-based browsers (excluding Firefox & Safari) */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) and (not (-webkit-touch-callout: none)) {

    body > header {
        height: auto;
    }

}

Upvotes: 0

Related Questions