search

PolymerElements / paper-radio-button

A Material Design radio button
https://webcomponents.org/element/PolymerElements/paper-radio-button
19 stars 24 forks source link

Button does not show in Safari if css added #55

Closed vikjung closed 9 years ago

vikjung commented 9 years ago

Following shows both buttons in chrome but only one in Safari. If you remove the padding styling then it shows in safari as well. Not sure if its a safari issue or a polymer issue or just the way I have used things.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
        <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
        <link rel="import" href="/bower_components/paper-radio-button/paper-radio-button.html">
        <style>
            .radio {
                padding: 10px 15px 10px 10px;
            }
        </style>
    </head>
    <body unresolved touch-action="auto" fullbleed >
        <iron-collapse id="multiple" opened>
            <div class="horizontal layout flex center">
                <paper-radio-button name="ansWcheck" id="ansWcheck" class="radio"></paper-radio-button>
                hhh
            </div>
            <div class="horizontal layout center" >
                <paper-radio-button name="ansXcheck" id="ansXcheck" class="radio"></paper-radio-button>
                yyy
            </div>
        </iron-collapse>
    </body>
</html>
notwaldorf commented 9 years ago

Interesting. I think this is a race condition on when the children of the iron-collapse get stamped, and when it last recalculates the size. If you call updateSize('auto', false) on the iron-collapse element, you should see it be the correct size in Safari as well.

This should be an easy fix once https://github.com/Polymer/polymer/issues/1773 lands (by calling updateSize any time the distributed children change). In the meantime, I think the workaround is to just call updateSize manually on the iron-collapse (for example on page load)

notwaldorf commented 9 years ago

(moving this to iron-collapse https://github.com/PolymerElements/iron-collapse/issues/24, since that's where the real problem is)