UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36
Steps to reproduce the problem:
1. https://jsbin.com/vovedipuki/edit?html,output
2. Look at the menu items that are side by side in the HTML output window. Notice a 1px separation between the menu items. If you actually zoom in on this 1 x 50 pixel area with an image editor, you'll see an inverse gradient pattern acting as the border.
What is the expected behavior?
border-collapse should only affect table elements? Whether or not its usage here is correct, it should not be affecting the rendering of the gradient backgrounds. The problem doesn't seem to occur if you use a flat file as shown here:
https://jsbin.com/beraqazeno/edit?html,output
What went wrong?
Strange rendering of a 1px border showing separation between floated items when using a gradient background.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 71.0.3578.80 Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
Appears to render as expected in Firefox and IE.
Comment 1 by ajha@chromium.org
, Dec 6