I have a google map built from the Google Maps API v.3 on a website that I am building. It works fine in all browsers. However, in Safari (for the Mac at least) it is affecting other elements in an odd way. It seems to really only apply to absolutely positioned elements and it may have something to do with z-index. Has anyone had any experience with something like this? What did your solution end up being? Sorry I cannot post a URL yet.
Thanks!!
I ended up finding the solution to my problem. It did indeed have to do with z-index. Interesting that it was only happening in Safari, though. Regardless, if anyone else is noticing something odd going on with Safari and google maps it may have something to do with the z-index of an element on your page. That's where I would start. Thanks again!
The solution that worked for me here (as -webkit-transform:none; stops maps and other functions working on a page), was to ajax in the content via jQuery after load.
Hope that helps!
I'm not completely certain what's going on there since you aren't able to post a sample URL, but if nothing is working after you've tried everything, you can report the issue to the Google Maps API team and they can more thoroughly investigate to see what the issue is.
This is indeed a bug, and is not specifically on Google's end, it has to do with z-indexing getting messed up, whenever you use webkit, or so it seems.
There are two fixes for this, hopefully one of them works.
1. This is the preferred fix. Remove the webkit-transform from the DOM element that you load google maps into and set it's z-index to "auto". Also set it's child div to a z-index of "auto". You can do this with CSS like the following:
#googleMap{
-webkit-transform: none !important;
z-index: auto !important;
> div{
z-index: auto !important;
}
2. Remove the z-index value for every absolutely positioned element on your page that has one (apart from the Google Maps z-indexes), i.e. set z-index for all absolute positioned elements to z-index: auto.
I had experienced the exact same problem as described by the thread starter. In my case the whole navigation disappeared (navigation wrappers seems to be a popular div to mess with in this case, after some research). When I rid the Google Map div from the site the navigation showed up like it should.
Anyway, my solution was to add a direct style to my Google map div:
<div id="map" style="-webkit-transform: none; z-index: 10;"></div>
And that solved my case. Hope it might help someone out there!
Removing the translate globally broke other functionality in our app. It did however point us in the right direction.
This solution worked for us. We moved all the map pin elements back up to the 103 layer.
div[id*='marker_div_']{
-webkit-transform: translateZ(103px);
}
I experienced this same problem in Safari. In my safari it was causing my font on the affected div to become very thin and undefined. The cause I found was that the affected div was casting a shadow onto the div containing google maps. If I remove the drop show the issue is resolved.
Related
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
For some reason, z-index is working for one particular element in IE8, but not in IE7 (or if I use the pseudo IE7 compatibility view while in IE8). It's working for all of the other elements. The only difference is that this element has a negative z-index, so I tried using a positive one of 1 and still, it's the only one not working.
The part that's not working is this:
.passport {
position: absolute;
left: -130px;
z-index: -2;
}
And it's attached to this image that's supposed to be underneath everything else:
<img src="http://www.blahblahblah.com/image.png" class="passport">
Everything else, has positive z-index from 2 and up (which is why I used 1 for the index when trying a positive one to see if that helped). As the code is now, this image IS underneath everything else in IE8, but like I said, not in IE7. That's not the actual path of the image, btw, I just changed it here for privacy purposes.
Any idea on what could be causing it? The only solutions I keep seeing on the web are addressing z-index that doesn't work at all or works in IE7 but not IE8 and when I find one that seems close, the solution doesn't help me because it's suggesting to use position: static (which I can't because I need this to be absolute) or other things that have nothing to do with this because it's with dropdown menus and javascript and all sort of other things in the mix.
All I'm dealing with is images stacking, nothing else. The one thing I found that might help me understand is this website, but I don't understand what it means by different stacking "context". http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
I don't know if it would actually be relevant to my issue, but I figured I'd ask what it means in case it can help. Otherwise, the general issue is that this works in IE8 but not IE7 and I was wondering why that might be?
Again, I have searched, so if it's a simple answer I just missed it. Thanks!
Take a look here:
IE 6 & IE 7 Z-Index Problem
i know this issue is well documented but i cant find a working solution from what ive been reading. I have a pretty large site and i want a div to sit ontop of everything else on the site. now ive tried giving the div "position:absolute; z-index:99999;", this will work in everything apart from ie. How can i do this in ie?
You can try:
position: fixed; z-index: 9999;
This will make the div to appear on top of the others. (and follow as you scroll down)
so i tried this jquery script i found
$(function () {
var zIndexNumber = 1000;
$('div').each(function () {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
i added another wrapper around it to check if the broswer is ie before hand. this seems to fix the issue but does mean pages are slower loading in ie as every div is being treated. when the page loads.
This isn't what should happen. Without seeing the HTML & CSS, it's difficult to identify why. Some standard debugging techniques...
Setting the z-index to a very high number should render that element in front of everything else**. If it's not being rendered in front, then something is setting the z-index of the other elements to something higher. This could be set in CSS or by script. The quick check is to turn off scripting. To investigate this, use firebug to find the z-index of the element in front. To find it, edit any scripts, even minified ones, and simply search for "z-index".
It sounds like a quick "back to basics" re-examination of the problem may yeild the cause.
Normally one would use low z-index numbers - 2 is higher than 1, why use more?!? Some plug-in developers have been known to use stupidly high z-index numbers.
.
** IE 6 has a well-known bug where replaced form elements (e.g. select) will 'shine' through. The fix is to put an iframe in front of it.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.