Transition font-size on Chrome after zoom in

Question

Another question about SVG style transitions... :)

This time I'm trying to transition the font-size on a text element. It works fine until I increase the page zoom in Chrome. Once I do that it appears that at the start of the transition it sets the size down to the original zoom size before transitioning to the correct outcome size. The result is that I see the font-size flick smaller for a split second before growing larger.

With the default zoom the transition looks smooth. Other browsers don't seem to have this issue.

Wondering if I can try my luck again with some style-setting trick that will work more reliably across browsers...

Answer 1

Browser page zoom is buggy in conjunction with SVG. You can fix the zoom level with CSS, with something like * { zoom: 1; }, but that causes other inconveniences for users. You could attempt to workaround the bug in JavaScript, but I think that would be a lot of work.

Answer 2

This is happening because D3's style transitions use getComputedStyle to retrieve the starting value to be interpolated. See here for more information. When WebKit's full-page zoom is being used, this will return different starting values for the transition. This disparity is limited to certain cases including font-size, which is why you probably won't see it elsewhere.

In fact, after .style("font-size", A), retrieving via .style("font-size") isn't guaranteed to return the value A that was set when a full-page zoom is in use.

I have used the following workaround for this in the past:

.styleTween("font-size", function(d) {
  return d3.interpolate(
    this.style.getPropertyValue("font-size"),
    d.size + "px"
  );
});

This overrides D3's use of getComputedStyle and retrieves the current font-size style directly (and assumes there is a font-size already set e.g. in your .enter() selection).

Again, my word cloud experience came in handy. :)