HTML Table Rendering Bug in Latest Microsoft Edge

%3CLINGO-SUB%20id%3D%22lingo-sub-2550513%22%20slang%3D%22en-US%22%3EHTML%20Table%20Rendering%20Bug%20in%20Latest%20Microsoft%20Edge%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2550513%22%20slang%3D%22en-US%22%3E%3CP%3Eborder-collapse%3A%20collapse%20is%20making%20the%20table%20behaves%20incorrectly%20which%20triggers%20paint%20problems%20in%20latest%20edge%20browser.%3CBR%20%2F%3E%3CBR%20%2F%3ETo%20view%20the%20problem%2C%20I%20have%20created%20this%20sample%20CodePen%20%3CA%20href%3D%22https%3A%2F%2Fcodepen.io%2FmhdSid%2Fpen%2FXWRMmZJ%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fcodepen.io%2FmhdSid%2Fpen%2FXWRMmZJ%3C%2FA%3E%26nbsp%3B%26nbsp%3Bwhich%20sets%20two%20tables%3A%3CBR%20%2F%3E1-%20border-collapse%3A%20collapse%3B%3CBR%20%2F%3E2-%20border-collapse%3A%20separate%3B%3CBR%20%2F%3E%3CBR%20%2F%3EI%20would%20like%20to%20ask%20someone%20to%20view%20the%20CodePen%20and%20try%20it%20out%20by%20settings%2Fremoving%20values%20from%20the%20input%20boxes.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EThere%20is%20a%20border%20painting%20bug.%20The%20issue%20can%20be%20solved%20by%20resizing%20the%20browser%20or%20by%20setting%20any%20CSS%20rule%20that%20triggers%20a%20DOM%20repaint%20process.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EThe%20left%20table%20uses%20border-collapse%3A%20collapse%3B%20and%20repaints%20weirdly%20when%20input%20values%20are%20set%20and%20cleared.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EThe%20right%20table%20uses%20border-collapse%3A%20separate%3B%20and%20it%20is%20painting%20and%20rendering%20as%20expected.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2551183%22%20slang%3D%22en-US%22%3ERe%3A%20HTML%20Table%20Rendering%20Bug%20in%20Latest%20Microsoft%20Edge%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2551183%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1103935%22%20target%3D%22_blank%22%3E%40Sippi333%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20there%2C%20you%20are%20welcome%20to%20the%20%3CSTRONG%3EMicrosoft%20Edge%20Insider%3C%2FSTRONG%3E%20Community%20Hub!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20reporting%20the%20issue%20here.%20I%20would%20recommend%20you%20to%20send%20feedback%20about%20this%20bug%20through%20the%20in-app%20feedback%20tool%20in%20Microsoft%20Edge%20(%3CI%3EAlt%2BShift%2BI%3C%2FI%3E)%20with%20the%20diagnostics%20attached%20in%20order%20to%20help%20the%20%3CSTRONG%3EMicrosoft%20Edge%20dev%20team%3C%2FSTRONG%3E%20to%20resolve%20your%20issue%20as%20soon%20as%20possible.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%20tagging%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F318459%22%20target%3D%22_blank%22%3E%40johnjansen%3C%2FA%3E%2C%20a%20Microsoft%20Edge%20Engineer%20to%20look%20into%20this%20issue.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Visitor

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.

1 Reply

@Sippi333 

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.