Vue-storefront: The hover effect on the buttons in the header is moved one pixel down.

[alinadivante]

Current behavior

By hovering over the buttons in the header, hover effect moves one pixel down.

Expected behavior

Hovering effect should be aligned with the header.

Steps to reproduce the issue

1. Hover over any buttons in the header
2. Look at hamburger menu

Repository

Can you handle fixing this bug by yourself?

• [ ] YES
• [x] NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [ ] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [ ] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser:
• OS:
• Node:
• Code Version:

Additional information

[Hackbard]

Can't reproduce this Bug on Mac with Chrome 74, Safari 12.1 and Firefox 60.3

[dlandmann]

Error only on Startpage of https://demo.storefrontcloud.io/ visible, if browsercache (Chrome and Safari testet) cleaned.

localhost works great.

[RGijsberts]

The Account button in the header, the one with the avatar, contains an element: account_circle

As you can see this element has two classes; .material-icons and .block .
.material-icons assigns a display:inline-block rule to this element, while .block should override this by assigning a display: block rule.

It seems that it is a matter of which stylesheet is loaded first because on https://next.storefrontcloud.io/ I can reproduce this error by refreshing multiple times. Sometimes the bug appears and sometimes it doesn't.

The styling rules for .material-icons are located in a css file of which the load is initiated by webfont.js, the function is located in index.template.html

[pkarw]

Przemek can you take this one as well?

[patzick]

Fixed with 1.10