search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

Optimize preloader HTML and styles #5107

Closed ltodorov closed 4 years ago

ltodorov commented 7 years ago

Expected Behavior

I had to implement your circular preloaders in one project and I found a lot of unneeded CSS rules that can be removed or replaced. Also I would like to align your HTML and styles to the latest Material design version: https://www.webcomponents.org/element/PolymerElements/paper-spinner

Current Behavior

HTML and CSS can be optimized by removing or replacing some rules.

Possible Solution

I will create a pull request but should I run the release command? I saw so many differences which are not related to my preloader changes and in this case what version number should I use? 0.100.2?

Dogfalo commented 7 years ago

No need to run the release command, please take a look at the CONTRIBUTING.md

tomscholz commented 7 years ago

Also see #3888

ltodorov commented 7 years ago

I saw it but I would need to recompile SCSS files. Is there another way to generate the materialize.css?

tomscholz commented 7 years ago

What do you mean? You can compile our scss with our grunt tasks

ltodorov commented 7 years ago

Okay, I'll try again. Thanks!

ltodorov commented 7 years ago

@tomscholz I'm not sure it'll fix the glitch that was described in #3888. I reduced the animation speed but I couldn't see any problem. Tomorrow I can test on different devices.

ltodorov commented 7 years ago

BTW I used grunt sass postcss userbanner --newver=0.100.1 to generate the CSS files. I don't know why all comments have been marked as changes.

DanielRuf commented 7 years ago

Please just run grunt sass_compile. Also we never push compiled files, they are ignored. To test locally take a look at the task names in the gruntfile.

ltodorov commented 7 years ago

I tested on the following devices and browsers: macOS Sierra 10.12.6 - Safari and Chrome 60 OK Windows 10 - Chrome 60, Internet Explorer 11, Edge, Firefox - some annoying shaking on IE 11 and Edge only. This effect is also visible on Polymer's page: https://www.webcomponents.org/element/PolymerElements/paper-spinner/v1.2.1 Windows 10 Mobile - Edge OK iOS 10.3.3 - Safari OK Android 6.0.1 - Chrome 58 OK

ltodorov commented 7 years ago

Has someone else checked the modified preloaders? I'm not sure if there is an issue or the animation is not enough smooth. This is a link to demo: https://codepen.io/anon/pen/VzMBYj

ltodorov commented 7 years ago

@tomscholz I couldn't reduce the HTML for issue #3888. Animations are not smooth on pseudo elements in IE and Edge.

tomscholz commented 7 years ago

As you can see in this gif, there is a moment where the spinner hops back for a second. kapture 2017-09-06 at 19 40 54

ltodorov commented 7 years ago

Isn't this also reproducible with the current code? I didn't fix anything. I improved the code quality only.