krulik
4/8/2014 - 1:53 PM

The styled scrollbars email

The styled scrollbars email

Hi,

Currently all styled scrollbars in the web application are being handled in the following way:

  • Webkit browsers (Safari, Chrome) use native (experimental) CSS3 abilities to style the scrollbars
  • All other browsers (IE8-10, FF) use a polyfill in the likes of a JS plugin to replicate the look and feel

While this strategy is fine for a simple scenario, it has major shortcomings in our web application:

  • The heights of the panels are prone to change in run-time, meaning that the JS plugin needs to be re-initiated with every change of this nature, such as resizing the window or opening several tree nodes in the left panel
  • The plugin uses run-time JavaScript calculations in order to simulate the scrolling. This will eternally be multitude of times slower than using native scrollbars, and UX will be compromised with degraded performance (on browsers which happen to be significantly slower than Webkit browsers in the first place)
  • Interoperability between several components and modules of the application is prone to be compromised too. A critical example is the "Virtual Scroll" of our Grid component. The Grid component uses smart calculations in order to scroll between thousands of rows in a performant manner. With non-native scrollbars however, the scroll position is getting out of sync and we need to manually "patch" the two components in order to work together. While the manual sync is attainable, it will take a significant development time, and unfortunately will never perform as good as the original "Virtual Scroll" of our Grid
  • While the current JS plugin for styled scrollbars was chosen punctiliously and with care - it is the reality that every code has issues and edge cases with different browsers, maintenance and price of additional complexity added to the system. The fewer lines of code we add to the system, the more robust it will be

Therefore we suggest to drop support for styled scrollbars in browsers which don't natively support them, currently being:

  • IE8-10
  • FF

To support this suggestion we advise you to examine Google's strategy with its styled scrollbars of the Google Apps UI family. They always use native scrollbars and present styled ones for browsers which support them while other browsers which get unstyled ones. As performance and technology leaders they regularly push HTML5 standards and abilities to their limits, and using the aforementioned technique is educative for us.

We're open to any suggestions and ideas as to how to improve the experience for our users and make the best product possible.

Best Regards,

Serge