search

lumapps / lumX

The first responsive front-end framework based on Angular & Google Material Design specifications
https://ui.lumapps.com
MIT License
1.96k stars 274 forks source link

fix(progress): prevent animation wobble #603

Closed davidbonnet closed 6 years ago

davidbonnet commented 6 years ago

General summary

Chrome (Version 67.0.3396.87 (Official Build) (64-bit)) has rendering artifacts when SVG elements are animated in an also animated HTML container when the viewport zoom is other than 100%. This makes the circular lx-progress component wobble.

The fix consists of moving the animation behavior from the svg element (which is an HTML node) to a g (which is an SVG node). With all the animation happening in the svg land, the Chrome rendering pipeline works better.

Expected behavior

non-wobbly

Current behavior

wobbly

Steps to reproduce

  1. Go to the lx-progress demo.
  2. Click on the toggle circular progress button.
  3. Zoom-out and resize the window until you see that the lx-progress wobbles.
arnaudvalle commented 6 years ago

@davidbonnet I noticed it looks a bit odd in Safari when zoomed out

safari

arnaudvalle commented 6 years ago

Also in IE11 it seems 'static':

ie11

davidbonnet commented 6 years ago

@arnaudvalle: Centering the circular element with a group fixes the Safari issue. Regarding the IE11 bug, did this happen before? It seems that some related issues are mentioned here: https://github.com/lumapps/lumX/issues/407#issuecomment-192194958

arnaudvalle commented 6 years ago

Yes, IE11 is already pretty broken in the current version (and has been for a while) so it's not as critical as fixing it in Safari.

davidbonnet commented 6 years ago

This is how it looks like in IE11: progress-ie11-bug

Actually, the determinate circular progress looks inderminate in Chrome and Safari.

arnaudvalle commented 6 years ago

Nicely done! 👍 And indeed, seems like the determinate version was broken, so thanks for fixing it as well!