I have this site that I currently work on, which contains a lot of resources to load. Of course these slow down the loading and rendering of the pages, but mostly on the home page which has two sliders, a virtual tour app and a google map. The sluggisness reached the point where I had to think through what can I do to improve the load times. After a while I realized that the lazy loading can help here. So I put a nice preloader gif into the div which the mapΒ will be loaded into and moved the initialization from the html to javascript. Everything worked fine, except one little thing: the map “footer” links (Map data, terms and conditions, etc.) height seemed to be 100%. This was weird, because the map worked perfectly in an iframe. After a little investigation it turned out that one of my css rules caused this behaviour, namely the line-height. I defined this css rule on the container div of the map’s container div. As soon as I removed the rule the map worked perfectly again.
I hope I could save some debugging time for you with this little post! π
