card: subheader content not visible on retina screen if content overflows

[matyasfodor]

Actual Behavior:

• What is the issue? *

The subheader is not visible for the following code in certain circumstances

  <md-card>
    <md-subheader>Valami</md-subheader>
    <md-list>
      <md-list-item>A</md-list-item>
      <md-list-item>BB</md-list-item>
      <md-list-item>CCC</md-list-item>
    </md-list>
  </md-card>

It is not displayed on my retina screen. If I attach my secondary lower resolution screen, it is visible. When I move it back to the retina screen, it's visible with blurred edges for a second, then it disappears. There are multiple md-card containers in a md-content container. The issue is only present if the content of md-content is higher than the actual viewport.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: I tried to reproduce it with codepen ((https://codepen.io/matyasfodor/pen/KvGoKG)), but I couldn't. Please check details to reproduce.
• Details: I'm working on an open source project so I can share the code this way: Go to https://app.dd-decaf.eu/app/pathwayvis, and click maps (between the info and the pencil) in the top right bar. The second card should have a subheader Maps. It's not visible on retina screens. If you delete some of the md-list-items, to the point when the content fits the panel, it suddenly appears. The code lives here: https://github.com/DD-DeCaF/metabolica-ui-map/blob/master/src/pathwayvis/components/mapselector/mapselector.component.html I tested it with Firefox 54 on the same computer, the issue does not persist. It may be possible that it is not an angular material but a Chrome bug.

AngularJS Versions: *

• AngularJS Version: 1.6.2
• AngularJS Material Version: 1.1.3

Additional Information:

• Browser Type: * Chrome
• Browser Version: *60
• OS: * MacOS Sierra
• Stack Traces:

[Splaktar]

Sorry for the delay in responding to this. It looks like you found a temporary solution.

Please note that the md-card docs have details about how to use classes like md-subhead for its subheaders. Here's a CodePen example of that.

Note that you can use md-subheader with md-card, but you should only do so within md-card-content. You weren't using md-card-content at all, so I added that to the above example as well.

If you have more questions about general layout and styling, please ask on Stack Overflow, Gitter, or the AngularJS Material forums.

If you've tried using the card directives and classes mentioned in the docs and find a bug, please submit a new issue with a CodePen demo and reproduction steps.