Recent 'box-sizing' change brakes button appearance

[dzhioev]

Hello,
in a6041a2 box-sizing of the :host was changed from content-box to border-box and 'width' was increased by the doubled padding, to compensate the box sizing model change.

I have a page which includes . The button has custom padding:

paper-icon-button {
  padding: 0;
}

Before the change, effective CSS applied to :host was:

padding: 0;
width: 24px;

After the change it became:

padding: 0;
width: 40px;

As a result the button became 1.5x larger.

In fact this change affects every existing <paper-icon-button> with customized width and/or padding.

[danbeam]

/cc @notwaldorf

[notwaldorf]

Hmm, the reason we changed that is that a global * style would break the internal style (and because of Paul Irish's blog post, a lot of people are doing * { box-sizing: border-box}), so we tried to make it less brittle. The alternative was hardcoding it to content-box, which was not great.

I'm not sure how we could have unbroken people and still fixed it. :(
I think the best thing is to update the size -- i'm not sure rolling it back now is worth it, since it's been out for a week, and I think a lot of people already updated. I am really sorry about breaking your styles, though :(

Let me know if there was a better way to fix this that I missed.

[dzhioev]

Hardcoding it to content-box seem like a better solution to me. Why did you prefer border-box? Even if setting * { box-sizing: border-box} is common, I don't believe it's a majority. So hardcoding content-box will affect less users.

[notwaldorf]

I think content-box is generally bad (there's a bunch of articles on this), because that's not how the CSS box model really works. :(

Again, I am very sorry for the breaking change. I've checked and everywhere else where we hard code sizes we also use the right box-sizing, so hopefully this will never happen again.