google map create hidden div and span inside with value BESbswy and reduce angular performance

user_3825502 0
Viewed 896

I am using google map API v3 on my angular project however when I add a map to my project google map creates a hidden
<div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;"><span style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">BESbswy</span></div>
element at bottom of body.
I didn't realize it until I felt my fps reduced when I am working with a map, for example, creating a polygon with drawing manager and etc.. So after several hours of debugging, I realized that because of that useless hidden div angular change detection triggered every second and cause performance issue I checked ngAfterViewChecked and realized that even after my component loaded completely this function called continuously and when I removed that element from dom everything back to normal.
I google this problem and I also found some questions related to this problem but I couldn't find any acceptable solution Unknown “BESbswy”

enter image description here

angular google-maps-api-3 javascript
1 Answers

Having this same issue with Google Places API. Whenever I access results from querying their services the stupid "BESbswy" div too. My searches have shown its something related to typekit but I am not using @font-face or google fonts on my page. My guess is google drops it in to make sure their maps display correctly? But it stays there - super annoying. The only fix for this I have seen is to create a timer and remove the div after a few nanoseconds. But that seems more like putting a bandage on the problem and not fixing it.

EDIT MINUTES LATER!

So, I just discovered that this happens for me when the google map is added to the screen. The container for the map doesn't have width or height defined so the map is coming in without a width, so when typekit is trying to see if the fonts have loaded by comparing the "BESbswy" strings and is failing because there is no width on the compared string from the map. This results in the runtime test for font loading to error out or not load.

It seems google didn't write logic to remove the div on error/failure. But maybe that is so we know there is something wrong? Personally, I would prefer a log to the console…

user_4712670
Related