Paper-Checkbox Animation Fix

[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

[frankiefu]

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

[TechnoBishop]

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" [email protected] 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).

[frankiefu]

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