_hover does not work in MS Edge

[Yardie83]

Bug report

Describe the bug

_hover pseudo class does not work in MS Edge (locally and on both chakra websites (current/next))
Tried to change the borderRadius on hover on an Avatar component.

I noticed that while the image is still loading, the hover works. Once the image is loaded is stops working.

To reproduce

1. With MS Edge try to change the borderRadius on hover

Minimal reproduction

https://codesandbox.io/s/keen-water-gmxe7

Expected behavior

Should change borderRadius on hover

Screenshots

Edge:

Firefox:

Edge (no Image):

System information

• Browser: Microsoft Edge: Version 85.0.564.51 (Official build) (64-bit)
• Version of @chakra-ui/core: 1.0.0-rc.2
• Version of Node.js: 12.18.3

[ljosberinn]

So I checked, and there are two things going on here:

• when the image is loaded, you need to use sx to img:hover the underlying image because that's where the borderRadius: 99999 is applied on: https://codesandbox.io/s/holy-butterfly-1yqid - this works in Edge and Firefox
• when there is no src, the fallback will activate which can actively be changed with _hover, that's what you see in your last gif, that works everywhere too

Sadly can't replicate the 2nd gif, what was the code for that?

[Yardie83]

Hi, thx for checking. Sorry for the delayed response, I was out of town for the last couple days. Your answers work for me too in Edge.

The code for the second gif is as shown in the gif:
<Avatar _hover={{borderRadius:3}} name="Dan Abrahmov" src="https://bit.ly/dan-abramov" />

Leaving off this part:
sx={{ 'img:hover': { borderRadius: 30, }, }}

If the sx part is added it works as expected.

[ljosberinn]

Sounds good! I understand it is a bit antiintuitive because you have to use sx here and can't directly style via Avatar but I believe given the underlying HTML this is plausible.