Memory leak if toggling element style between display block and none multiple times #2
Description
Hey,
getting a memory leak with this component. The current setup is:
<fullscreen-overlay>
<basic-carousel>
(items)
</basic-carousel>
<fullscreen-overlay>
The fullscreen-overlay:
<dom-module id="fullscreen-overlay">
<style>
:host {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
background-color: black;
z-index: 12;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'fullscreen-overlay',
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
opened: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'scale-up-animation',
node: this,
axis: '',
timing: {duration: 500}
},
'exit': {
name: 'fade-out-animation',
node: this,
timing: {duration: 500}
}
};
}
}
},
observers: [
'_displayHandler(opened)'
],
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
toggleOverlay: function() {
this.opened = !this.opened;
},
open: function() {
this.opened = true;
},
close: function() {
this.opened = false;
},
_displayHandler: function() {
if (this.opened === true) {
this.playAnimation('entry');
this.style.display = 'block';
} else {
this.playAnimation('exit');
}
},
_onNeonAnimationFinish: function() {
if (this.opened === false) {
this.style.display = 'none';
}
}
});
})();
</script>
Calling open and close on the full screen element for 6-8 times completely freezes the app. This behavior is repeated consistently on Chrome, Safari, Safari mobile, FF and Opera.
Disabling animations in the fullscreen-overlay and just toggling between display none/block causes the same leak.
Removing the basic-carousel and just showing the inner content doesn't trigger any leaks.
Reactions are currently unavailable