MDL Button Not Showing in Safari

Question

I'm trying to use mdl with a button inside a card and am having trouble getting it to work across Chrome and Safari consistently. Here's the html:

<div class="mdl-card mdl-shadow--8dp" style="width:690px; margin:auto; padding:0px" id="myCard">
  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" style="height:100%; padding: 20px 0px 20px 0px;" align="center" id=myButton>
    <h1 id="myText" style="font-size:160px; font-weight:300;" align="center">Button</h1>
  </button>
</div>

As written, it works on Chrome but doesn't show on Safari. I can get it working on Safari by removing "height:100%" in the button style, but then it disappears on Chrome.

Here's a fiddle to play with if it helps: https://jsfiddle.net/shooks/80q7g7tq/11/

Any help would be much appreciated. I'm new to web development, so apologies if this is an easy one.

score 0 · Answer 1 · answered Feb 21 '17 at 09:54

MDL button works fine in safari. It is your code that messed up the button.

You have used h1 tag inside button html.
Don't use extra element inside button element.
Use mdl elements as provided by mdl. Don't insert anything new in between, unless you are sure.
If you want to increase the font-size then add new class to button and apply font-size to it. H1 is is not the solution. H1 used for page/article heading.
Don't use inline css on element. Use classes and ids.

Check this js fiddle, I have used mdl button code, without using any extra css. It works fine in both chrome and safari.

Resources for best practices:

MDL Button Not Showing in Safari

1 Answers1