toolbar: md-scroll-shrink does not work if content is scrolled too soon after page load

[marshall007]

Actual Behavior:

• What is the issue? Specifically in conjunction with ng-cloak, but also in many other cases, md-scroll-shrink does not work if the sibling md-content is scrolled within 5 seconds of loading the page.
• What is the expected behavior? It should work as soon as the DOM is loaded.

CodePen (or steps to reproduce the issue):

• The existing toolbar Scroll Shrink demo reproduces this behavior so long as you attempt to scroll the md-content within 5 seconds.

Angular Versions:

• Angular Version: 1.6.1
• Angular Material Version: 1.1.3

Additional Information:

• Browser Type: Chrome
• Browser Version: 56
• OS: MacOS 10.12.2

[mahmoud-kayali]

I have faced the same issue with ng-cloak, I have managed to solve it by doing the following:

1. Remove ng-cloak
2. Set the style to display:none
3. added a class to my css called force display
   .force-display { display: block !important; }
4. on the same element add the attribute ng-class="{'force-display':true}"

What this does is that it will hide the element by default, once angular is loaded and initialized it will set the class force-display to the element which will override the display:none style because !important exists

hope this workaround helps anyone facing the same issue

[Splaktar]

I can reproduce this in 1.1.5 as well: https://material.angularjs.org/1.1.5/demo/toolbar