Following problem:
I'm trying to style the print view of a website containing a custom google map.
In the print view and only on Chrome there is a row of tiles missing. This does not happen for all maps on other pages, just certain ones.
I can't seem to figure out why. Any ideas?
Horizontal Cut / Missing tile row
Although this question is quite old I thought I'd post a solution that worked for me in case anyone stumbles upon this question like I have.
Adding a few lines of CSS seems to fix this Google Maps painting issue:
.gm-style div > img {
position: absolute;
}
Thanks to the author of comment 13 on this chromium bug report for offering this solution.
Related
507 pages are being printed even though there are only 9 pages of content (498 blank pages)
Dearest community, after one of the latest releases of chrome, somewhere after version ~103-105, an unfortunate bug appears when printing a web page.
It either prints hundreds of blank pages and/or prints distorted proportions outputs.
This change applies to all chromium based browsers (Google Chrome, MS Edge...),
and occurs especially in pages with charts or graphs.
If anyone else encountered this issue - the reason lies in the CSS property "position: absolute".
If your code posseses "position: absolute" you may want to change it to "fixed" or "relative", depending on your needs.
My code needed 2 changes. One required massive refactoring since changing the position property enforced me to recalculate lots of other elements.
The second took only 3 lines of code but alot longer to find since it made me override "Charts.js" internal CSS styling and implemented the "!important" flag, like so (my app uses chartjs version 2.9.4):
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay "absolute"
}
The "position: absolute" property appears in 3 other classes, so if the above suggestion does not suffice - you may want to try the following (or locate other places containing absolute position):
.chartjs-size-monitor,
.chartjs-size-monitor-shrink,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay "absolute"
}
Hope this helps. Good luck.
Same problem here, also using ChartJS. Thanks for posting your solution, it is working for us. Note there is an open Chromium issue about this.
I had the same problem, it printed exactly 420 blank pages more. I just added this to my custom css file:
.chartjs-size-monitor-expand > div { position: fixed !important; }
1) Above attached is my Firefox screenshot. I have modified my userchrome.css file to get rid of the tabs but now Firefox has a big empty gap at the bottom. I am unable to get rid of it. I tried everything.
2) Also, how do I shrink my navigation bar to the right so that my tree Style tab occupies the whole left side.
Here is what I have tried so far:
#main-window[sizemode="maximized"] #titlebar {margin-bottom: -34px !important; }
#main-window[sizemode="maximized"] #nav-bar {margin-right: 138px; }
The -34px worked in expanding my main window but without the outside frame so it ended up hiding the bottom part of the window. I think there should be another "Frame-window" or something?
I am really surprised that no one has asked a question like this; I mean almost anyone who uses Tree Style Tabs add-on is bound to face this issue and that addon has like more than a million users.
OK, thanks to Micha, I was able to partially solve the first problem.
here is the link with screenshots and an explaination:
https://github.com/LucKy-4U/Firefox-Chrome-Folder
Still, if someone knows how to do it without using my stupid trick then please let me know as my trick is partially broken.
I am building a web site based on Foundation and I am using Google Maps to display some markers on it.
The problem is that I lose the map control elements from the top left (zoom in and zoom out), and I can't figure out why.
Is there a way to fix this? Here's a screenshot:
I found out the solution and it is quite simple:
#map img
{
max-width : none;
}
Hopefully this helps someone else!
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.
Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks