www.codecademy.com - see bug description

[bull500]

URL: https://www.codecademy.com/en/courses/learn-java/lessons/introduction-to-java/exercises/whats-your-name
Browser / Version: Firefox 49.0
Operating System: Linux
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: https://www.codecademy.com/en/courses/learn-java/lessons/introduction-to-java/exercises/whats-your-name
2. Once the site load, try to adjust the mini-window(s) positions by moving it left or right using the dividers that separate them.

Expected Behavior:
Smooth movement while adjusting the mini window sizes

Actual Behavior:
Lots of jank while movement of the dividers

Note: You'll have to log in to this site.
Im not fully sure but i feel the site kind of lags on Firefox

From webcompat.com with ❤️

[karlcow]

Thanks @bull500
no lags for me on Firefox 49.0a1 (2016-05-22) on MacOSX.

The part which is active on hovering the gutter that can be moved is:

<div class="fcn-grid" style="cursor: auto;" data-reactid=".dne1.2.$whats-your-name">

<!-- content removed -->

</div>

[karlcow]

style="cursor: auto;" is changed to style="cursor: ew-resize;"
The code for the gutter is in
https://cdn-production.codecademy.com/assets/webpack/platform.bundle-8c3ecc9c5fa0397953c935ee6b8c8e64.js

handleMouseMove: function() {
  function e(e, t) {
    if (this.state.dragging) {
      if (e.preventDefault(), this.props.adapter.trigger('interface:resizing'), t) {
        var n = void 0;
        switch (this.state.focusedGutter.edge) {
          case 'right':
            var r = this.state.grid.DOMNodeRect().left + this.state.grid.percentageToPx('x', this.state.focusedGutter.slot.right());
            n = e.pagePosn.x - r,
            this.state.focusedGutter.slot.push('right', this.state.grid.pxToPercentage('x', n)),
            this.setState({
              grid: this.state.grid
            });
            break;
          case 'bottom':
            var s = this.state.grid.DOMNodeRect().top + this.state.grid.percentageToPx('y', this.state.focusedGutter.slot.bottom());
            n = e.pagePosn.y - s,
            this.state.focusedGutter.slot.push('bottom', this.state.grid.pxToPercentage('y', n)),
            this.setState({
              grid: this.state.grid
            })
        }
      }
    } else {
      var i = this.state.grid.gutterUnderPosn(e.pagePosn),
        o = void 0;
      o = void 0 !== i ? {
        right: 'ew-resize',
        bottom: 'ns-resize'
      }
      [
        i.edge
      ] : 'auto',
      C['default'].save(), (this.state.focusedGutter !== i || this.state.cursor !== o) && this.setState({
        focusedGutter: i,
        cursor: o
      })
    }
  }
  return e
}(),

but as I said, I didn't have any issues.

[karlcow]

Maybe someone on Linux can test? @hallvors ?

[hallvors]

On my (slowish) Ubuntu laptop it clearly lags significantly. I captured a profile - data is here:
http://hallvord.com/temp/moz/profile-wc2601.json
Perhaps this should be moved to Bugzilla..

[jrmuizel]

It looks to me like the profile is showing the page causing a bunch of layout flushs/reflows during script execution. The best way to improve performance in this situation is to avoid these.

[mikeconley]

Filed this Bugzilla bug just in case: https://bugzilla.mozilla.org/show_bug.cgi?id=1278970

But I concur that the most likely way of improving this is by having the site not cause so many reflows.

[bull500]

@mikeconley Thank you! 😄
In addition to that just want to say the same site on chrome the movement of those windows is kinda flawless; i don't know what they do different tho.

[mikeconley]

For one, they run content out of process. If you're running in single-process mode (like hallvors was when he gathered that profile), I think you'd definitely feel the reflows more since they'd be janking the whole browser instead of just the content.

They might be making other optimizations too.

[denschub]

As @mikeconley filed a bug in bugzilla and we don't know what's going on yet, let's close this as a duplicate until we know it's the sites fault. We can convert the bugzilla bug into a evangelism one, if needed.