slider tick spacing alignment incorrect

[dexster]

Bug, feature request, or proposal:
Bug

What is the expected behavior?
Tick spacing should be consistent

What is the current behavior?
There is a bigger gap between the second to last and last tick

What are the steps to reproduce?
It works fine until you have more than 8 ticks. This slider will show the issue
<md-slider min="0" max="10" tickInterval="1"></md-slider>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 4.2.6
Angular Material 2.0.0-beta.8

Screenshot
From your demo site

[mmalerba]

Confirmed, doesn't seem to just be the last tick either, it slowly gets more and more off as you move toward the end of the slider

[mmalerba]

I believe this is an issue with how chrome handle's the background-size property. It seems that if it comes out to some fractional pixel value it slowly accumulates error each time the background is repeated.

Evidence for this:

1. I do not see the problem when the slider track length is evenly divisible by the number of ticks (e.g. 1000px and 10 ticks).
2. I do not see the problem in Firefox at all regardless of the track length.

We may want to consider using a different strategy for drawing ticks or filing a bug with chrome to see if we can get them to change how background-size works. As a temporary workaround if you see this issue in your app, I suggest setting the slider size so that the track is evenly divisible by the number of ticks.

[jelbourn]

Confirmed that this is fixed in the MDC-based slider (which uses an entirely different style/implementation for ticks)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}