Transition font-size auf Chrome nach Zoom in

Question

Eine andere Frage über SVG-Stil Übergänge ... :)

Diesmal versuche ich die Schriftgröße auf ein Textelement zu überführen. Es funktioniert gut, bis ich den Seitenzoom in Chrome vergrößern. Sobald ich das tue, scheint es, dass es am Anfang des Übergangs die Größe auf die ursprüngliche Zoomgröße heruntersetzt, bevor es in die korrekte Ergebnisgröße übergeht. Das Ergebnis ist, dass ich die Größe der Schriftgröße für einen Bruchteil einer Sekunde kleiner sehe, bevor sie größer wird.

Mit dem Standardzoom sieht der Übergang glatt aus. Andere Browser scheinen dieses Problem nicht zu haben.

Frage mich, ob ich mein Glück wieder mit etwas Stil-Einstellung Trick versuchen können, die mehr zuverlässig in allen Browsern funktioniert ...

Answer 1

Dies passiert, weil die Style-Übergänge von D3 getComputedStyle verwenden, um den zu interpolierenden Startwert abzurufen. Weitere Informationen finden Sie unter here. Wenn der Ganzseitenzoom von WebKit verwendet wird, werden unterschiedliche Startwerte für den Übergang zurückgegeben. Dieses Ungleichgewicht ist auf bestimmte Fälle beschränkt, einschließlich font-size, weshalb Sie es wahrscheinlich nirgendwo anders sehen werden.

Nach .style("font-size", A) wird beim Abrufen über .style("font-size") nicht garantiert, dass der Wert A zurückgegeben wird, der festgelegt wurde, wenn ein ganzseitiger Zoom verwendet wird.

Ich habe die folgende Abhilfe für diesen in der Vergangenheit verwendet:

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

Dies überschreibt D3 die Nutzung von getComputedStyle und ruft den aktuellen font-size Stil direkt (und nimmt dort ein font-size bereits festgelegt zB in Ihrer .enter() Auswahl).

Wieder war meine word cloud Erfahrung praktisch. :)

Answer 2

Browser Seite Zoom ist Buggy in Verbindung mit SVG. Sie können die Zoomstufe mit CSS korrigieren, etwa mit * { zoom: 1; }, aber das verursacht andere Unannehmlichkeiten für die Benutzer. Sie könnten versuchen, den Fehler in JavaScript zu umgehen, aber ich denke, das wäre eine Menge Arbeit.