[MdGridList] - Grid doesn't display at all on server with RatioTileStyler display strategy

[jimjim2a]

Bug, feature request, or proposal:

On the server the MdGridList component doesn't display when using the RatioTileStyler strategy. It doesn't display because the applied styles are not valid properties name.

Specifically on the setRowStyles and getComputedHeight methods.

These methods define some styles to be applied on the tile, but the properties to be written are camelCase. On the browser this works well, but the server renderer writes theses properties inside the style attribute as they are.

Ex : style="marginTop: calc(((33.333333333333336% - ( 0px * 0.6666666666666666 )) + 0px) * 0);paddingTop:calc(((33.333333333333336% - ( 0px * 0.6666666666666666 )) * 1) + (0 * 0px));"

marginTop and paddingTop are not valid property names for the browser, therefore it ignore them.

What is the expected behavior?

The css properties should be written kebab-case to be correctly handled by the browser.

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[jimjim2a]

Sorry to talks about this again, but it seems that the issue is occurring again because of.... this fix !

On the last version of Angular (5.2.6) and material (5.2.2), when running on server the grid doesn't show up using RatioTileStyler.

Maybe this is related to the switch from Parse5 to Domino adapter of the universal engine.

Fact is that the TileStyle on server fails to apply style like padding-bottom but works when using paddingBottom.

Thx !

@andrewseguin @crisbeto

[crisbeto]

Thanks for the heads-up @jimjim2a, I could confirm that the margin and padding weren't being assigned anymore. What's odd is that the old renderer used assign the properties, even though they were invalid. The new one just drops the invalid ones altogether. I've submitted #10131 to sort it out.

[jimjim2a]

Awesome ! Thanks @crisbeto