subheader: sticky subheaders have incorrect styles in browsers that support position: sticky

[kylemacfarlane]

trafficstars

When you scroll sticky subheaders in a browser that doesn't support position sticky (e.g. Chrome <= 55) there will be a shadow underneath. However on browsers that do support it (Chrome >= 56, Firefox, etc) there is no shadow.

The bug is evident in the demos: https://material.angularjs.org/HEAD/demo/subheader

The problem seems to be that when sticky support is detected the sticky-state attribute is never added because setupSticky and thus onScroll aren't called.

[Splaktar]

Sorry for the delay in responding to this issue.

However, since the required issue template wasn't used, I don't have enough information to take any action here. The issue is that the md-subheader has a shadow when it should not? Can you please post a screenshot with an arrow to the offending shadow?

Can you please provide more details about the classes applied to the md-subheader and which you think are wrong or are missing?

Are you still seeing this in AngularJS Material 1.1.11? What OS?

[kylemacfarlane]

The issue is that sticky headers don't have a shadow when they should. This is because the sticky service was created before widespread native position sticky support and never worked properly.

Scrolled sticky headers are supposed to have a drop shadow: https://github.com/angular/material/blob/41c9d00dbb3cd85a31c3a02693854f25b2f7a8df/src/components/subheader/subheader.scss#L43

This style is applied when an element has the attribute stick-prev-state="active" which is applied by the $mdSticky service: https://github.com/angular/material/blob/41c9d00dbb3cd85a31c3a02693854f25b2f7a8df/src/components/sticky/sticky.js#L292

The problem is that the $mdSticky service doesn't setup the scroll listeners which set the state if native position sticky support is detected: https://github.com/angular/material/blob/41c9d00dbb3cd85a31c3a02693854f25b2f7a8df/src/components/sticky/sticky.js#L85