Severe lag with FireFox 40

[Jaeiya]

I'm not sure how I should represent my specific use-case, but I'm writing a chat application which adds elements dynamically to a container with a message-tray element. The container is instantiated as the scroll object with Optiscroll.

For some reason (only in FireFox) after I add about 10 messages, the entire screen starts flickering like it's trying to re-render the objects in the container... It's very strange. Here's some of my code.

// Initialization
this._scrollObj = new Optiscroll(this._oPort, {
  autoUpdate: false
 });


scrollPort() {
  // The timeout is arbitrary to wait until the object is rendered to the 
  // container before the update happens.
  setTimeout(() => {
    this._scrollObj.update();
    this._scrollObj.scrollTo(false, 'bottom', 300);
  }, 50);
}

The above scrollPort method is only executed when a message is added to the message-tray. I should also mention that this bug still exists even without the execution of the scrollPort method. Just having the Optiscroll instantiated, is enough to cause it to glitch out.

edit I should add that I removed all transitions from the inner elements and still no luck. I'm also using the vanilla JavaScript version, NOT jQuery.

[albertogasparin]

First of all, one thing that might cause the issue is that you are calling update() right before scrollTo(). That call should be removed as scrollTo does it by itself.
Then, if that does not help, would you mind creating an online jsbin (or anything else) in order to let better debug the issue? As the Optiscroll demo website works fine in FF40.

[Jaeiya]

Well I disabled the calling of that function and it still glitches out for me. It's really hard to do a jsbin since there's a lot of functionality that is implemented.

I do have a keyhandler that goes off on every key-stroke, which I'm going to test if there's some weird sort of connection there.

[albertogasparin]

Well, I cannot think of anything else that might cause that issue, as setting autoUpdate: false disables the polling and Optiscroll should be "paused", only listening for scroll events.

[Jaeiya]

It's very strange... I tried another scrollbar lib perfect-scrollbar and it has the exact same lag. It's not graphic lag, it causes lag in my contenteditable div, while typing. It's as if every time I type it's trying to redraw the scroll container...

[Jaeiya]

The only thing I can think of is that it has to do with my custom element. I'm using the Aurelia framework which creates and populates custom elements onto the page. Have you tested your scrollbar with custom elements?

Here's a screen shot of how it looks. With your lib, the only difference would be classes on the MainPort and message-tray objects.
http://puu.sh/k3YvT/b51a7e1af0.png

[Jaeiya]

Okay, I've broken it down to the simplest I could. I setup an interval and removed all key events from the element. The interval simply adds an element every 500ms. After a while when I type in the contenteditable div, it becomes extremely laggy and the scroll container starts to appear to redraw with every key stroke...

[Jaeiya]

Turns out it's a flex-box bug: https://bugzilla.mozilla.org/show_bug.cgi?id=946167

And here: https://bugzilla.mozilla.org/show_bug.cgi?id=1108772

I'm not sure if you can somehow get around it... As soon as I delete the display: flex everything is smooth.

[albertogasparin]

Wow, that's a really nasty bug. The ticket says that it has been fixed but apparently it is not.
Have you tried adding a translate3d transformation? Maybe by hardware accelerating the container the reflow becomes faster.
Apart from that, I cannot think of a way to avoid the reflow as Optiscroll needs to update it's internal cache.

[Jaeiya]

What kind of transformation would you suggest? I'm not too familiar with those as of yet.

And yeah, it's quite annoying. The sad part is, using -moz-box (the old spec) has no performance hit at all, but it also doesn't order the flex boxes correctly.

[Jaeiya]

Ugh, looks like I"m going to have to write styles JUST for FireFox... It's really dissapointing to encounter such a horrible oversight in design, especially when all other browsers are displaying nested flex boxes perfectly.

I actually went through and slowly disabled the nested flex items, which gradually increased the performance, but sadly it wasn't enough, which is why I'm going to have to write a large section of layout code JUST for FireFox.

Anyway, I gatta head to bed, sooo tired 😪

[albertogasparin]

Agree, really disappointing. Flexbox have been around for a while and still there are issues and performance drawbacks. You should file a bug in Firefox so maybe someone can look at it.