Polymer IronResizableBehavior iron-resize event not fired when "resizable" element is hidden/un-hidden as described in docs

Below is the Polymer IronResizableBehavior demo modified to fire based on the "resizable" element being hidden or un-hidden rather than just on the window being resized. The event is fired when the window is resized, but the Polymer docs (https://elements.polymer-project.org/elements/iron-resizable-behavior) indicate:

This event will be fired when they become showing after having been hidden, when they are resized explicitly by another resizable, or when the window has been resized.

So, I would expect the event to also be fired when I hide/un-hide the "x-puck" element below. What am I doing wrong?

<link rel="import" href="../../iron-resizable-behavior.html">
<link rel="import" href="../../../paper-button/paper-button.html">

<dom-module id="x-puck">
  <style>
  </style>

  <template>

    <b>I'm an un-hidden element!</b>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-puck',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    listeners: {
      'iron-resize': '_onIronResize'
    },

    attached: function() {
      this.async(this.notifyResize, 1);
    },

    _onIronResize: function() {
      alert('x-puck _onIronResize called!');
    }
  });
</script>


<dom-module id="x-app">
  <style>
  </style>

  <template>
    <paper-button on-tap="showElement">Show</paper-button>
    <paper-button on-tap="hideElement">Hide</paper-button>

    <x-puck id="xPuck" hidden$="{{hide}}"></x-puck>
  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-app',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    properties: {
      hide: {
        type: Boolean,
        value: true
      }
    },

    showElement: function() {
      this.hide = false;
    },

    hideElement: function() {
      this.hide = true;
    }
  });
</script>