Replace bold effect with text-shadow to avoid resize on focus.

PolymerElements / paper-button

A button à la Material Design

https://www.webcomponents.org/element/PolymerElements/paper-button

138 stars 64 forks source link

Replace bold effect with text-shadow to avoid resize on focus. #30

Closed coreyfarrell closed 8 years ago

coreyfarrell commented 9 years ago

This is a potential fix for bold text causing resize (issue #23). It makes a copy of all content inside an invisible 0 height bolded div. This ensures the button width is sufficient for when the element is focused.

Do we need to check for an attribute to disable this? For example to deal with when the button has complex SVG with no text, it would be unneeded and potentially perform poorly.

coreyfarrell commented 9 years ago

I've pushed a replacement commit that solves the issue in a much simpler way.

cdata commented 8 years ago

Thanks for the PR. Unfortunately, this solution is not going to work for us on an aesthetic level. The issue still stands, but we'll have to come up with a different solution.

notwaldorf commented 8 years ago

I think this looks significantly blurrier (at least on a Mac). With text shadow:

With bold text: