Bootstrap's font-family style reduces SVG performance in Google Chrome

Created by: Herst

In Google Chrome there seems to be an issue where the value of the font-family has an effect on the performance when scaling <text> elements inside a SVG. It seems like the values are parsed anew every time the effective font size changes. With Bootstrap 4 the value of font-family is -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" and this had a noticeable negative impact on a SVG interaction heavy web application which I ported from Bootstrap 3 to Bootstrap 4

It could be that the effect does not show on macOS, since the -apple-system generic font family matches right away, while on Windows/Linux/Android several font families need to be dismissed before arriving at one which exists.

See https://crbug.com/781344 for details. I would also welcome contributions to the bug report which would help in getting it confirmed and fixed. I reproduced it on Desktop Linux and Windows for now, no idea about macOS or Android.

Setting the font-family style of <svg> elements to something simple seems to work.