css reset causes malformed map elements (max-width)

[Erich Blume]

I've noticed that when employing the template provided by the project HTML5 Reset, v3 map windows no longer properly render. In particular, the map itself renders well, but several overlay elements (such as the zooming and street view widgets - as well as any API-created overlay elements like markers) are squished, sliced up, or fail to render entirely. I'm sorry, I don't have a demonstration available, but here is a link to an image showing what the slicing:

Compare with this image, which has been fixed with a css patch I will give shortly, and which looks identical to the map you get without using the HTML5 Reset css:

By trial and error, I was able to find the offending CSS 'reset' that caused the issue. The rule, from '_/css/core.css' in the HTML5 Reset template, was:

/*- fluid images and objects ----------*/

img,
object,
embed {max-width: 100%;}

Therefore, the fix I implemented was to unroll the change with

#map_canvas img { max-width: none; }


The reason I am reporting this to this list is that it seems like very strange behavior to me. Not knowing the internals of the google map api, I'm not certain why the rule should break the map interface in the way it does. Perhaps it is a bug, perhaps not. Hopefully reporting this here will help someone.

[Rossko]

I can't see this as a 'bug'? If something external messes with the
CSS that the map uses, then yes it is likely to render wrong, same as
with other chunk of HTML.

The width-related CSS in particular is probably upsetting the way the
API manipulates small parts of bigger images ('sprites') to create
buttons, corners, etc.

Certainly worth highlighting the problems that can pop up!

[Erich Blume]

I agree, this probably isn't a bug, but since HTML5 Reset is being pointed to by many as a 'drop-in' template for HTML5 web apps, and since so many web apps want or need google map support, I figured others will probably end up with this issue as well.