Tabs indicator being set incorrectly due to imprecise jQuery .width() use

The calcRightPos function to determine the right attribute for the tabs indicator utilizes the jQuery .width() function: https://github.com/Dogfalo/materialize/blob/master/js/tabs.js#L25. jQuery’s width function is imprecise in it’s result. For example, we are using percents to specify the width of the tabs. The width of the active tab (el) when checking in dev tools is 643.52, but el.width() returns 644. The extra .5 pixels causes the calcRightPos to return a -.5px. This in turn causes the width of the content of the ul.tabs container to exceed the container width, which then makes the scrollbar appear:

https://dl.dropboxusercontent.com/u/184528/screenshot.png

A simple fix is to use the JS getBoundingClientRect() function:

var calcRightPos = function(el) { return $tabs_width - el.position().left - el[0].getBoundingClientRect().width - $this.scrollLeft(); };

It might be smart to use getBoundingClientRect() for everywhere width() is used ($tabs_width).

[jacobq]

@Dogfalo this is a pretty severe issue for me. Is there a fix planned? If not, would you accept a PR?

[Dogfalo]

Tabs no longer relies on jQuery so this issue will be fixed in v1