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

Answer 1

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. :)

Answer 2

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.