I have many markers in clusters, one of them with 3 markers in it.
But when I open it, I see only one marker.
If I open developer console in browser or change zoom I see all of them.
What I need to do to prevent it
P.S: I catch this error only in Safari. In Firefox and Chrome everything work fine
This appears to be a CSS problem. No JavaScript code path differences are apparent between Firefox (which works) and Safari (which does not).
In the Cluster.prototype.addMarker() function, removing the "this.markers_[i].setMap(null);" lines, which caused the clusters to remain on the map, though they are cut off as though by a bounding box (see attached screenshot; note that both clusters are cut off at the bottom, at different positions). This leads to believe that the action of hiding the existing markers when creating the cluster icon is causing the cluster itself to be hidden by a misplaced bounding box. This might be the reason for your markers being not displayed at a certain zoom level or zoom action.
This is a problem(bug) with Safari 5.1, you can try with an older version 5.0.5 or the newer version 5.1.1, it should work as expected.
Related
We run the graphical part of our software in Canvas. With the latest version of Google Chrome (v77) being released, our product doesn't display anything on load. Canvas simply doesn't draw anything.
When you resize the windows or scroll, Canvas draws the elements correctly, but not initially. For every refresh, we are back to a blank page.
If we disable Accelerated 2D canvas, it works. We have tried the upcoming versions of Google Chrome (v78 and v79), and here canvas renders and draws correctly.
Does anybody experience anything similar, i.e. is it a Chrome bug?
Dropzonejs doesn't work with Chrome 77 on Android. It is probably same isue with canvas.
more on this isue here
This seems to be a browser bug, which is very easy to reproduce.
Steps to reproduce:
Open http://docs.sencha.com/extjs/4.1.3/#!/example/grid/buffer-grid.html in latest Chrome, Firefox or IE.
Set zooming level to 110% (do Ctrl +)
Try to scroll the grid to the end of the range and reach the latest record with 5000 index (by dragging the scrollbar or via mouse wheel, no difference)
Issue: note, that it's impossible to reach the latest record. Scrollbar starts bouncing back by 20-30 records. This case is reproducible for buffered views only and even when javascript execution is stopped via debugger, but I can't repeat the same scenario with Ext 5.1:
http://dev.sencha.com/ext/5.1.0/examples/grid/buffer-grid.html
Has anyone faced this issue before? Any ideas how to fix this? Ext support answered that this is because of incorrect zoom handling in browsers and they don't really support such cases.
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
I'm trying to work out why the StreetView controls don't appear in Chrome browser when StreetView is opened programmatically but they do appear when StreetView is displayed by using the pegman...
Here's the map:
http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap
Drag pegman to show StreetView and it works perfectly.
You can see the top-right close button, the zoom and compass controls and the bottom left and right Google links.
Now open the infowindow by clicking a marker or a sidebar item.
The infowindow contains a link to open StreetView for that marker - give that link a click.
StreetView displays but none of the controls are visible, neither are the two bottom Google links.
Yet if you hover the mouse where the controls would be displayed the mouse click works just as if the controls were visible.
If you hover the mouse top right until it turns into apointing hand and click where the zoom control would be, the StreetView will zoom in or out and while zooming you can see all of the invisible controls.
Everything works fine with Firefox and IE9.
I'm using the latest versions of all browsers on a 64 bit Windows 7 pc, another person has reported the same problem on 32 bit Windows XP.
I've tried to use the Chrome developer tools but see nothing that would cause the controls to not be visible.
This usedto work fine in Chrome so i'm not sure if the problem is related to a Chrome update or a change in the Google Maps API - no changes have been made to the map javascript recently.
Can anyone suggest what might be wrong?
Thanks.
Martin.
The problem seems to be with -webkit-transform:scale(1) that you apply to the #toiletMap div[style].
Removing this, it fixes the problem..
alternatively, you can add translateZ(0) to fix the problem.
-webkit-transform:scale(1) translateZ(0);
Update
It must be related to
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3928&q=webkit%20Transform&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2835
webkit-transform overwrites z-index ordering in Chrome 13
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.