Chrome 53 node rect +(devicePixelRatio*100)% padding

Starting with Chrome 53, a huge padding space shows up for HTML inside SVG.

On Windows 10, set DPI to 300% and log off (the higher the DPI, the more weird padding). Then log back in.

Load this is an older Chrome or in Firefox: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Then load it in Chrome 53.0 (latest as of writing this). See the bigger padding space from the HTML edges to the rect edges.

You will see that where it says “A Big HTML Source” the width and height of the rect inside the first g of a node (class=“node”) are calculated to be about 50% larger relative to the HTML’s width and height.

<g class="node" transform="translate(145.23046875,57.75)" style="opacity: 1;">
    <rect rx="5" ry="5" x="-125.23046875" y="-37.75" width="250.4609375" height="75.5"></rect>
<g class="label" transform="translate(0,0)"><g transform="translate(-115.23046875,-27.75)"><foreignObject width="230.4609375" height="55.5"><div xmlns="http://www.w3.org/1999/xhtml" style="font-style: normal; font-variant: normal; font-weight: 300; font-stretch: normal; font-size: 14px; line-height: normal; font-family: &quot;Helvetica Neue&quot;, Helvetica; display: inline-block; white-space: nowrap;">A <span style="font-size:32px">Big</span> <span style="color:red;">HTML</span> Source!</div></foreignObject></g></g></g>

The bigger the HTML, the bigger the “padding”.

Here’s a screenshot from a private app. Firefox (I don’t have an older Chrome anymore):

Chrome 53.0 (latest as of writing this):

[oxygen]

Found a workraound.

It appears that Chrome amplifies some margin/padding when zooming. When changing the zoom it fails to correctly scale back the padding or margin (not CSS propertie values themselves, but the screen space they took when zoomed).

Ever since the above mentioned Chrome version, I think the engine starts zoomed already and then goes back to 100% (default) somehow incompletely.

Workaround the issue:

// var graph = new dagreD3.graphlib.Graph({compound: true});
// var dagreRenderer = new dagreD3.render();

function dagreRenderWrap()
{
	var bWebKitRetinaZoomMarginBugWorkaroundEnable = 
		window.devicePixelRatio > 1 
		&& navigator.userAgent.search(/WebKit/) > -1
		&& innerWidth / outerWidth < 1.4 // prevent fonts from overflowing in case of browser zoom
	;

	if(bWebKitRetinaZoomMarginBugWorkaroundEnable)
	{
		// Zoom out, so the orphaned alien padding is as small as possible.
		document.getElementById("svg-canvas").style.zoom = 1/window.devicePixelRatio;
	}

	dagreRenderer(d3.select("svg g"), graph);

	if(bWebKitRetinaZoomMarginBugWorkaroundEnable)
	{
		document.getElementById("svg-canvas").style.zoom = 1;
	}
}

//<svg id="svg-canvas"> somewhere on page.

I think this could be included as some sort of patch? We’ll see.

[Daijobou]

I have this issue on mobile devices only in current Chrome-Mobile 79. Firefox-Mobile working fine. Maybe this one: https://bugs.chromium.org/p/chromium/issues/detail?id=738022&q=foreign-object