SVG ForeignObjects draw over all other elements in Chrome

Question

Update 22 April, 2016: Nothing new, I just decided to check up on this, and post a quick code update. Firefox still performs as expected, IE doesn\'t perform at

Answer 1

This is still an issue in Chrome version 76 (canary) and official ver. 74.

The workaround I used was to place the canvas before the svg, not in the foreignObject inside it and wrap the whole content with a div with position: relative so the svg can be positioned absolute to be always above the canvas.

Also the wrapper div must have some additional css (flexbox in my case) so the canvas lays below the svg.

See it on CodePen

The con of this approach is you won't access any canvas mouse/screen event listeners if the canvas is covered by the svg at 100%.