Memory leak if toggling element style between display block and none multiple times

[kristfal]

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.

[JanMiksovsky]

@kristfal Many thanks for reporting this. I'm traveling right now, so just wanted to let you know that it might take a few more days before I can look into the problem.

[kristfal]

Thanks and no prob. 

For now, I've resorted to translate3d the carousel wrapper offscreen instead of using display block/none. This works like a charm. 

Let me know if you need more info while debugging and happy travels.

—
Kristian

On Mon, Sep 14, 2015 at 1:38 PM, Jan Miksovsky notifications@github.com
wrote:

@kristfal Many thanks for reporting this. I'm traveling right now, so just wanted to let you know that it might take a few more days before I can look into the problem.

Reply to this email directly or view it on GitHub:
#2 (comment)

[JanMiksovsky]

I could use help reproducing this problem.

I've created a basic-carousel-issue-2 repo that includes your code and the scenario as I understand it. Running this locally, I use the debugger to manually invoke the open() and close() methods on the fullscreen-overlay element. However, I'm unable to reproduce the problem. I tried invoking open/close 10 times, with no apparent result. I tried this in both Mac Chrome and Safari.

Can you please clone the repro, and amend the code so that it reproduces the problem you're seeing?

[kristfal]

Hey,

Sorry for the late reply. Will revisit this part of the code in my project next week. If you don't mind, I'll make a jsfiddle to reproduce what I'm seeing from my side. 

—
Kristian

On Mon, Sep 21, 2015 at 7:02 PM, Jan Miksovsky notifications@github.com
wrote:

I could use help reproducing this problem.
I've created a basic-carousel-issue-2 repo that includes your code and the scenario as I understand it. Running this locally, I use the debugger to manually invoke the open() and close() methods on the fullscreen-overlay element. However, I'm unable to reproduce the problem. I tried invoking open/close 10 times, with no apparent result. I tried this in both Mac Chrome and Safari.

Can you please clone the repro, and amend the code so that it reproduces the problem you're seeing?

Reply to this email directly or view it on GitHub:
#2 (comment)

[JanMiksovsky]

@kristfal A jsFiddle/jsBin would be very helpful, thanks!

If possible, it'd be extra-helpful to have a clean repro case that doesn't use additional components like neon-animation, as those may be confounding the problem. If the bug results from the specific interaction of basic-carousel and neon-animation, of course, it would still great to know about it, but a bug that can be reproduced with basic-carousel would be easier to diagnose and fix.