Fix recharts#2589 (recharts#3893)

src/util/DOMUtils.ts

@@ -73,14 +73,23 @@ export const getStyleString = (style: CSSProperties) =>
     '',
   );
 
+function removeInvalidKeys(obj: Record<string, any>) {
+  const copyObj = { ...obj };
+  Object.keys(copyObj).forEach(key => {
+    if (!copyObj[key]) {
+      delete copyObj[key];
+    }
+  });
+  return copyObj;
+}
+
 export const getStringSize = (text: string | number, style: CSSProperties = {}): Size => {
   if (text === undefined || text === null || Global.isSsr) {
     return { width: 0, height: 0 };
   }
 
-  const str = `${text}`;
-  const styleString = getStyleString(style);
-  const cacheKey = `${str}-${styleString}`;
+  const copyStyle = removeInvalidKeys(style);
+  const cacheKey = JSON.stringify({ text, copyStyle });
 
   if (stringCache.widthCache[cacheKey]) {
     return stringCache.widthCache[cacheKey];
@@ -96,13 +105,10 @@ export const getStringSize = (text: string | number, style: CSSProperties = {}):
     }
     // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
     // https://en.wikipedia.org/wiki/Content_Security_Policy
-    const measurementSpanStyle: Record<string, any> = { ...SPAN_STYLE, ...style };
-    Object.keys(measurementSpanStyle).map(styleKey => {
-      (measurementSpan.style as Record<string, any>)[styleKey] = measurementSpanStyle[styleKey];
-      return styleKey;
-    });
+    const measurementSpanStyle: Record<string, any> = { ...SPAN_STYLE, ...copyStyle };
+    Object.assign(measurementSpan.style, measurementSpanStyle);
 
-    measurementSpan.textContent = str;
+    measurementSpan.textContent = `${text}`;
 
     const rect = measurementSpan.getBoundingClientRect();
     const result = { width: rect.width, height: rect.height };