Skip to content

Paper-Checkbox Animation Fix #584

Description

@TechnoBishop

Hi guys,

While I was messing around with the Polymer code for the paper-checkbox element I found that it was animating weirdly, causing it to appear as if the box became the checkmark first, then shrunk, then expanded again. Diving into the CSS behind the element, I found the culprit and fixed the issue on my own copy of the code, and figured you'd like to know so it can be fixed in the next release of Polymer.

To fix this issue, within the stylesheet paper-checkbox.css simply add border: solid 2px; to the #checkbox.checked.box CSS declaration.

This prevents the borders around the box from disappearing as it shrinks, which was the issue I had found, but allows them to disappear as soon as the checkmark begins to expand.

Hope this helps!

TechnoBishop

Activity

  1. frankiefu commented on Jul 2, 2014

    @frankiefu
    Member

    I am not seeing the animation issue that you described. The demo here seems to work ok: http://www.polymer-project.org/components/paper-checkbox/demo.html

  2. TechnoBishop commented on Jul 2, 2014

    @TechnoBishop
    Author

    Just did, and its there. The problem is that the top and left border on the
    box disappear right as the animation starts, when they shouldn't disappear
    until after the box has shrunk down, right before it expands to make the
    checkmark.

    I slowed the animation down in my own tests to about 5s (rather than the
    .28 its currently at) and that makes it a lot easier to see.

    Simply adding the code I listed in the OP to the CSS file fixes the issue.
    On Jul 1, 2014 11:25 PM, "Frankie Fu" notifications@github.com wrote:

    I am not seeing the animation issue that you described. The demo here
    seems to work ok:
    http://www.polymer-project.org/components/paper-checkbox/demo.html

    —
    Reply to this email directly or view it on GitHub
    #584 (comment).

  3. frankiefu commented on Jul 3, 2014

    @frankiefu
    Member

    You are right. I could see the issue now. Thanks for the report and the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions