1507456 - [Linkedin] Highlight inconsistency on hover inside starting steps section

Status: RESOLVED DUPLICATE of bug 1089326

(Core :: Web Painting, defect)

Description

[Anca Soncutean, Desktop QA]

Attachment: screencast issue.mov

[Affected versions]: 
- 63.0.3 (20181114214635)
- 64.0b9 (20181112164519)
- 65.0a1 (20181115100051)

[Affected platforms]:
- macOS 10.13
- Windows 10 x64
- Ubuntu 16.04 x86

[Steps to reproduce]:
1. Login with valid credentials on https://www.linkedin.com/
2. Collapse the 3 getting started steps section (below navigation bar) by clicking on the “up” arrow next to it
3. Hover each subtitle

[Expected result]:
- All subtitles are highlighted on hover.

[Actual result]:
- “Keep connecting” is not highlighted on hover.

[Regression range]: 
- Not a regression, I could see this highlighting issue way back to Fx 31.0a1.

[Additional Notes]:
- On Chrome this issue is not reproducible.

Comment 1

[Brian Birtles (:birtles)]

Hi Anca, are you able to create a reduced test case for this? When I log in to LinkedIn I don't see the getting started steps.

Comment 2

[Anca Soncutean, Desktop QA]

Attachment: bug.zip

I hope this is helpful! Also, I've made a second screencast to be easier to identify the affected area: https://drive.google.com/file/d/1HtF743wWir6hCLVYhRLaTFlBzH6SnSOj/view?usp=sharing . If anything else, please let me know!

Comment 3

[Brian Birtles (:birtles)]

Thanks Anca! That helps a lot!

Looking into this it appears to be because the :hover is specified on a child of a <button> (a <span> in this case) and that doesn't work due to bug 843003 which has been resolved as a dupe of bug 1089326.

If LinkedIn want to work around this the usual advice is just to move the :hover selector to the button instead of the span:

https://stackoverflow.com/questions/5965810/buttonhover-not-working-in-firefox
https://stackoverflow.com/questions/34396750/css-not-working-for-span-tag-hover-which-is-inside-button-tag-in-firefox-and-in