Jul 14 2021 07:58 PM - edited Jul 14 2021 08:44 PM
border-collapse: collapse is making the table behaves incorrectly which triggers paint problems in latest edge browser.
To view the problem, I have created this sample CodePen https://codepen.io/mhdSid/pen/XWRMmZJ which sets two tables:
1- border-collapse: collapse;
2- border-collapse: separate;
I would like to ask someone to view the CodePen and try it out by settings/removing values from the input boxes.
There is a border painting bug. The issue can be solved by resizing the browser or by setting any CSS rule that triggers a DOM repaint process.
The left table uses border-collapse: collapse; and repaints weirdly when input values are set and cleared.
The right table uses border-collapse: separate; and it is painting and rendering as expected.
Jul 15 2021 01:01 AM
Hi there, you are welcome to the Microsoft Edge Insider Community Hub!
Thanks for reporting the issue here. I would recommend you to send feedback about this bug through the in-app feedback tool in Microsoft Edge (Alt+Shift+I) with the diagnostics attached in order to help the Microsoft Edge dev team to resolve your issue as soon as possible.
Also tagging @johnjansen, a Microsoft Edge Engineer to look into this issue.