Table row expanded icon disappears when expanded on Firefox and looks like a checkbox

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Click on the “expand” icon.

What is expected?

Icon becomes horizontal

What is actually happening?

Icon animates and disappears afterwards.

Environment	Info
antd	4.12.2
React	17
System	Windows 10
Browser	Firefox 86

This is most likely due to scaling issues (::after width being 1px and displaying as 0 on certain scales), because after zooming the page in it works.

Workaround for now:

.ant-table-row-expand-icon::after {
 bottom: 2px;
}

.ant-table-row-expand-icon::before {
  height: 2px;
}

[MichaelBuessemeyer]

For those who want the old behavior from antd version 3 back, the following CSS should do the trick. It should work in firefox:

.ant-table-row-expand-icon::after {
  display: none;
}
.ant-table-row-expand-icon-expanded::before {
  content: "-";
}
.ant-table-row-expand-icon-collapsed::before {
  content: "+";
}
.ant-table-row-expand-icon::before {
  position: unset;
  transform: none;
  background: inherit;
  height: 100%;
}

.ant-table-row-expand-icon {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 13px;
}

[anddrzejb]

So I have exactly the same issue. Firefox 86.0. The gif was made from the demo page (as you can see in the address bar):

Can this issue be reopened? After I made the gif, I noticed that my FF was not updated; after update the problem still persists: