Form label flickers when used next to a switch

🐛 Bug report

I came across this issue when I was working on a form with this template: https://chakra-ui.com/docs/form/form-control#sample-usage-for-a-radio-or-checkbox-group

If a switch is rendered next to the Form Control and the switch is pressed, the label flickers.

💥 Steps to reproduce

1. Write a component like so:

    <Box>
      <Switch />
      <FormControl as="fieldset">
        <FormLabel as="legend">hi</FormLabel>
      </FormControl>
    </Box>

1. Click the switch
2. The label flickers

💻 Link to reproduction

https://codesandbox.io/s/sharp-framework-un034?file=/src/index.tsx:218-356

[Gohsato]

In case anyone else has this bug - I found a hack to stop it from happening.

Just add this css:

fieldset {
  border-width: 1px;
  border-color: transparent;
}

[bl-ue]

I can reproduce as well (macOS 11.2.1 + Chrome 88.0.4324.182)

@Gohsato this is what you’re experiencing, right?

https://user-images.githubusercontent.com/54780737/108250983-e7674c00-7124-11eb-80a6-f87d32cc276f.mp4