Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Adding a new parameter: _precision. #593

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Danjohnsonnj
Copy link

The interpolation of values could result in values with decimals of an extremely long length, e.g. 'width: 50.12345678901%'. Since scrolling causes browser repaints, which will be impacted by updated CSS values, performance can be negatively impacted.

I'm proposing a new init option: _precision. This will be used to limit the interpolated value returned from _calcInterpolation via the toFixed(n) method. The default will be 10 (which is likely more than enough for most use-cases) or the user-specified value.

@Danjohnsonnj
Copy link
Author

The second commit (f87e217) builds upon the first by allowing a per-element override of the global precision via a 'data-precision' attribute.

@Prinzhorn
Copy link
Owner

First of all thank you for taking the time to write this patch.

I have multiple concerns:

  • Can you actually measure a performance difference? If so, please provide a demo.
  • Does it actually do what you intend (given the first bullet point is yes)? Let's take a simple example with some made up numbers
data-0="left:0%;"
data-800="left:55%"

now for every pixel you scroll, it moves about 0.06875% like this

0: 0%
1: 0.06875%
2: 0.1375%
3: 0.20625
......
799: 54.9312%
800: 55%

as you can see, even the first decimal place changes every pixel you scroll. This means specifying a precision between 1 and 10 does not have any effect.

  • It's way too complex for most users to grasp what this option is supposed to do (it took me a while to get it and think about the implications). I don't think anybody will do anything useful with this option.

@ghost
Copy link

ghost commented Nov 5, 2014

I think this would be a good thing to use with :before :after selectors, for example, If someone wants to show from 0% to 95.5%, they could set up something like this:

<p class='percentual' data-percent='0' data-0='@data-percent:0' data-1500='@data-percent:95.5'>
</p>
.percentual:before {
  content: attr(data-percent) "%"
}

with this we can avoid showing 10.5375%, and only show 10.53% if we want.

I don't know if there's already an easier way to do this without this modification.

@Prinzhorn
Copy link
Owner

I think this would be a good thing to use with :before :after selectors, for example, If someone wants to show from 0% to 95.5%, they could set up something like this:

That's a very interesting use-case. But I don't see this being used widely. Also attr() doesn't give you any control about formatting anyway, so it's kind of useless (e.g. in German the decimal separator is a comma 95,5%). That being said, I won't add this option just for number formatting.

@shinrox
Copy link

shinrox commented Nov 12, 2014

Yeah, I agree that's not a must have feature 😜 just said to show some use-case

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants