Button size in determined incorrectly in IE11 and EdgeHTML14 (ShadyCSS)
jouni opened this issue · 6 comments
From @vlukashov on November 30, 2017 9:59
When using the Lumo (prev. Valo) theme for a <vaadin-button> in IE11, the height of the button is determined differently than in other browsers (tested Firefox, Chrome, Safari and Edge).
For example, see a comparison to Firefox:
It looks like in IE11 the --lumo-button-size (prev --valo-size) custom property gets defined when it was not supposed to.
A live demo is here: https://vlukashov.github.io/vaadin-valo-button-sizing/ (source code at https://github.com/vlukashov/vaadin-valo-button-sizing/)
Copied from original issue: vaadin/vaadin-valo-styles#38
Sounds like a ShadyCSS issue. Need to investigate.
Any ideas why this does not happen in the demo? You need to run it locally to test in IE11 because it’s not transpiled in our CDN.
Side note: the --lumo-size property/concept is not yet really fully formed, and subject to change.
I’ve witnessed this myself now also. For some reason it only happens on some pages, and only affects the first button on the page.
The incorrect size comes from the theme="large" variant styles, which sets the button size to --lumo-size-l (44px).
I’m considering dropping the current --lumo-button-size property, which should resolve this issue.
Interestingly, a similar approach in vaadin-text-field does not cause problems:
- Introducing the
--lumo-text-field-sizeproperty: https://github.com/vaadin/vaadin-text-field/blob/master/theme/lumo/vaadin-text-field.html#L11 - Resetting the property to a smaller size: https://github.com/vaadin/vaadin-text-field/blob/master/theme/lumo/vaadin-text-field.html#L293
Fixed by webcomponents/shadycss#169 which has been shipped in webcomponentsjs v1.1.1
I have tried installing different versions of polyfill and I was able to confirm the fix.
See the screenshots of the demo pages after first load, before switching tabs:
Before (webcomponentsjs v1.1.0):
After (webcomponentsjs v1.1.1):
