I'm using Google Maps in a HTML5, jQuery Mobile based mobile site. The problem is that in Chrome the map isn't interactive, i.e not behaving as expected: Pinching, paning or any gestures simply does not work. The map more or less behaves as a picture, if I pinch it the browser eventually zooms in the entire site. Weirdly, if I manage to hit the top left +/- buttons on the map, it zooms as expected - albeit a bit slow / choppy.
Worth mentioning is that I'm using several map markers as well as a function that sets the zoom of the map to the markers bound. This is by the way "rendered" correctly in all tested browsers.
I've tested the site in several desktop browsers (including Chrome), all working correctly. As for mobile browsers I've tested Android Browser, Opera Mobile, Safari and finally Chrome Mobile. The map error occurs in both Android and IOS versions of Chrome.
Seeing that it works in the majority of mobile browsers and that Chrome is the newcomer of the bunch, I'm wondering if anyone else has seen this behavior? Hoping that may be the case I'm not attaching any code for now. However, if someone think this might be caused by an error in the code, I'll gladly edit it in.
So gestureHandling: 'greedy' !!!
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
styles: styleArray,
center: myLatLng,
gestureHandling: 'greedy'
});
Related
We are creating a WebPpp for Tablets.
Because our WebApp needs to have offline capabilities, we are saving an entire VectorTile layer in a pouchDB (around 25k tiles).
This layer is used for orientation (much like google maps),
it includes streets, buildings, forests and so on.
The Tiles are generated with the GeoServer 2.11.1 Extension.
Now our problem is, chrome crashed ('Oh no' message) when we move the map around or zoom in/out. Firefox doesn't work better, doesn't crash but slow as hell.
For testing purposes I deactivated any styling (just basic) and just this layer is displayed.
Does anyone know why the browser crashes, or is there a way to find out?
Also are there alternatives?
Tablet that is used to test: Galaxy note pro, is this tablet just bad for graphical apps?
Other tablets did work fine.
thanks
You may be running low on memory. Configure your ol.source.VectorTile with a smaller cacheSize, e.g. 32 instead of the default (128).
new ol.source.VectorTile({
cacheSize: 32,
// ...
});
Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.
While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:
100% zoom:
110% zoom:
Weird thing is, the lines aren't consistent throughout the different zoom levels:
This is taken at 90% zoom.
So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.
The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin
Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.
Edit:
Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.
Edit2:
Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)
This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")
The solution to that answer suggests you either:
Disable zooming (if you have designed for viewing at that particular size)
Have a 1px overlap on elements (e.g. margin: -1px)
The overlap fix has worked for me in the past, though this might be harder with a table-based layout.
When rendering TMS tiles, sometimes there is a white line that shows up between tiles. Not between all tiles, just some, and only sometimes. Pan around and it disappears and reappears again.
http://i.stack.imgur.com/lm13J.jpg
http://i.stack.imgur.com/izWy1.jpg
This is using OpenLayers 2.12 (non-mobile) version. Only happening on Android (tested on 4+ Galaxy Tab2), and only in the Chrome browser. Native browser is fine. I do specify this tag:
So pretty standard viewport tag. If the tag is not specified, no white line. I do need the tag to display the content at scale=1.0 only without the scalability option.
Does anyone have any ideas?
Thanks,
Andre
I have never found an answer to this question. It does seem that the Android Chrome browser, if you set the viewport to scale=1.0, on some devices interprets it as a 'zoom' of the viewport. So just like Ctrl+mouse wheel zoom in desktop browser.
What is interesting, if you do that in Chrome in google maps - you will also see white lines between tiles sometimes.
So - tough luck. Chrome.
I've got an issue that I'm trying to get to the bottom of and I can't seem to find an appropriate answer. Our mobile website - currently in test - uses a 3D Secure iframe.
Our tests have confirmed that where the iframe displays properly when using an Android phone (in-built webkit-based browser, Samsung Galaxy S II), it unfortunately does not for an iPhone (again, in-build webkit-based browser, Apple iPhone 4S). The iPhone simply does not display the iframe. I'm uncertain whether the iframe won't show or if it is merely positioned off-screen (but there are no CSS properties applied to either the iframe or parent that would affect its position/float/margins/padding).
Is there a major difference between two webkit-based browsers on different phones which would account for this? Has anyone suffered from the same issue? And if you can help, how do I try to solve it?
<iframe id="authenticationFrame" name="authenticationFrame" src="3d-secure-bit" height="400" width="330"></iframe>
Thanks,
I am writing a webkit app, and i'm using google maps api v3. I tried it on a android phone (HTC Desire) but it dosen't pinch to zoom. Note, i don't want to pinch and zoom a web page I want to pinch to zoom a google map v3 map in a web view. Has anyone got this working on android?
It would appear that, currently, you cannot rely on being able to receive pinch-to-zoom events on Android browsers. Here it is in the Android issue tracker: http://code.google.com/p/android/issues/detail?id=11909
works in tablet 3.2 - Amazing pinch to zoom on a map works ! just like ipad. Who would have thought that a new version of android would fix an issue - rather than creating another bug - requiring yet another work around. Android i rate your version control 2 stars out of 5 up from 1 well done..well ...better get back to fixing the incompatibilities in my other apps!