Google maps api not recognising any events on iOS7 (can't pan, zoom, click etc) - angularjs

I'm implementing google maps api v3 in angularjs. I have two maps on the page: one shows the user's location and sits in the sidebar while the other allows users to add markers. This second map is only used in a form to add entries to the system.
It work fine in everything except mobile Safari on iOS 7. On an iPad running iOS 7 the side map works - ie: you can pan and zoom, but the other map is as if it's an image - no panning, zooming, or clicking to add a marker.
In the iPhone on iOS7 both maps are static, as if they're images. Debugging in Safari doesn't show any errors.
Debugging does show that they don't ever fire the click event to add markers.
The iPad on iOS6 is fine. Android is fine. Desktop browsers are fine.
I'm using Angular-ui ui.Maps to generate the maps.
I can't even think how to debug this further. Has anyone had trouble like this with iOS 7?
.
Is iOS7 mobile Safari the new IE? I've had quite a few issues now that only crop up on iOS7.
Update:
The Doctor was right. Here's the code to fix it:
$timeout(function(){
_.each(document.getElementsByClassName("gm-style"), function(e){
this.addEventListener('touchstart', function(event){});
});
}, 3000);

I get the sense that iOS7 Safari is a bit buggy when it comes to touch events.
I found this thread which talks about a specific touch event but I think other events have similar issues. `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7

Related

REACT - Scroll to image loaded when component is re-rendered (happens only on IOS)

I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.

How to habilitate the leaflet map draw for all browsers in a PWA app?

We are developing an application for farmers and part of the process is done using the leaflet map component to draw the plots location.
Our application is a PWA and runs perfectly in firefox, the draw component works well.
However the draw map component in the google chrome, brave, opera doesn't work.
If you want to try look at App mobile , install using the google chrome or others than Firefox.
Any tips our suggestion of how to solve this?
We find the problem.
It was about the draw mode in "continuous" and no in "step-by-step".

CN1: iOS: Showing ToastBar when virtual keyboard is visible

On iOS (ipad pro) I cannot see the ToastBar showing messages, when the virtual keyboard is visible.
However on Android devices the ToastBar is visible in the same szenario.
Is there way to work around this or do I have to use modal dialogs?
I think I see a problem related to that, it seems we don't handle the special case of iOS VKB's correctly.
I made a fix for this which should be there for the coming update of Codename One this weekend.

hide address bar while scrolling in ionic in mobile browser

I am working on a project using Ionic and AngularJs. I need to hide the address bar on scroll just like Facebook mobile. When we open Facebook in a mobile browser and scroll to the top it hides the address bar. I need the same thing in Ionic for all platforms - Android, IOS etc.
I am breaking my head for last 2 days on this. But I still haven't found
anything relevant. I tried many things but nothing worked out. Kindly
help me to get out of this and also suggest if it is not possible.

windows app page shifts up after I use virtual keyboard

I'm using sencha-touch 2.3.1 and cordova 3.4.0.
My app works well in android and ios devices. In windows, app works fine until I have a form in the page and when I select that form, the virtual keyboard is shown. After I'm done using the keyboard and close it, the whole app page seems to shift up a bit and it leaves a gap or horizontal bar at the bottom.
How can I fix this issue?

Resources