Question

I have an HTM5 layout with about 8 <section> tags on one page. The main menu is just anchor links to each section on the page. Each section fills the browser window with 100% width and height, so when you click a menu link it looks as though you’re “sliding” into the next page, but it’s really just one long page. All sections are set to position: relative so I can absolutely position other elements inside.

In section 3 I have embedded a Google map as the background with 100% width and height and a z-index of 1. I have some text positioned over it with a z-index of 2. Everything in this section works beautifully, but for some reason when the map loads in it effects all sections that come after the map section. I don’t really know how best to explain, but it’s almost like a redraw issue for all following sections. The backgrounds (all sections have a large background) either don’t come in or have odd missing chunks. I’ve attached a screenshot to illustrate what’s happening.

If I don’t initiate the map it doesn’t happen. I even tried putting a timeout to init the map after 10 seconds. All sections loaded perfectly, then when the map loaded in after 10 seconds the backgrounds of all following sections disappeared.

Anyone know what might be happening?

Please let me know if this requires further explanation.

Here is a temporary link to the page: http://www.adlucent.com/crrs/

Answer 1

I had the same problem and posted a while back the user polo posted this fix to it. it worked on my site and fixed the problem

add this to your css

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-transform: none !important;
  }