Pixelated bars since 3.x

[shllg]

I updated spin.js lately from 2.3.2 to 3.1.0

Before, the spinner had clean rectangels as bars. Now with the new version they're looking pixelated/without smooth edges.

I tried different options to get rid of those edges - without success.

[shllg]

Before it looked like that:

[theodorejb]

Thanks for the report. It looks like the two screenshots are using different settings (number of lines, length, radius, etc.), which makes it harder to compare them. Can you share the settings used for both screenshots? Also, what browser is this from? Do you notice pixelation in other browsers too?

[shllg]

Yes the settings are slightly different, but changing them doesn't fix the problem (changed the settings and made a new screenshot - see below).

System: MacOS - Chrome / Firefox / Safari all with the same issue

Settings:

lines: 11             # The number of lines to draw
length: 12            # The length of each line
width: 2              # The line thickness
radius: 8             # The radius of the inner circle
scale: 1              # Scales overall size of the spinner
corners: 1            # Corner roundness (0..1)
color: '#000'         # #rgb or #rrggbb or array of colors
opacity: 0.25         # Opacity of the lines
rotate: 0             # The rotation offset
direction: 1          # 1: clockwise, -1: counterclockwise
speed: 1              # Rounds per second
trail: 60             # Afterglow percentage
fps: 20               # Frames per second when using setTimeout() as a fallback for CSS
zIndex: 2e9           # The z-index (defaults to 2000000000)
className: 'spinner'  # The CSS class to assign to the spinner
top: '50%'            # Top position relative to parent
left: '50%'           # Left position relative to parent
shadow: false         # Whether to render a shadow
hwaccel: false        # Whether to use hardware acceleration
position: 'absolute'  # Element positioning

[theodorejb]

I don't have a Mac to test with, but I noticed that rendering the lines with a transparent shadow seems to help in Chrome on Windows. Try setting shadow: '0 0 1px transparent' and see if it makes a difference.

[shllg]

Not i just blurs the edges a little bit. But the problem itself is still there.

(Again different settings but i think you can still see the issue)

[shllg]

Okay, i'm sorry - seems like i were wrong. I ran some comparison with the versions:

Same settings except of the last one with you recommended shadow setting.