Google chrome - disable pinch zoom - javascript

I have a kiosk in train station public place and in airport.
Random people needs to use the touch screen application which is running on Google chrome. When the user apply unpinch or pinch action on Google chrome
then Google chrome makes abnormal zoomed in screen and leaves the screen zoomed in forever, and then i get call that my application do not work.
Using chrome://flags/#enable-pinch in past Google chrome was able to kill the pinch but now in new version they removed that feature also following options none of them works anymore like it used to work in past with``chrome://flags/#enable-pinch`
chrome://flags/#touch-events - if i disable this it disable whole touch inputs on Google chrome
<meta name="viewport" content="width=device-width, user-scalable=no"> - if i apply this it has no effect on Google chrome, still pinch/unpinch attacks occure
Therefore, i kept trying all other possible way to resolve it
I am pulling all my hair out because all options are failing.
Can anyone please advise how to resolve it? How do i absolutely disable the pinch/unpinch on Google chrome or on whole operating system? I also tried control panel but none of the control panel showing an option where it says disable pinch/unpinch attacks.
// Dear God, please give me a Pinch disable option for, Google chrome. Its a nightmare, nothing stops pinch zoom actions.
window.addEventListener("touchstart", touchHandler, false);
function touchHandler(event){
if(event.touches.length > 1){
console.log("pinch "); // detected
window.location.reload();// detected
try {
event.preventDefault(); // FAIL FAIL FAIL FAILLLLLLLL ???????????
return false;
}catch(eee) {
}
}
else {
console.log("pinch not");//detected
}
}

ANSWER: 2018
I've been trying to solve the same issue with a kiosk application. I've tried meta tags and touch events but nothing on the application side would work for me.
In the end the solution I found was disabling pinch from the command line when booting up Chrome in kiosk mode
Here's an example:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --start-fullscreen --kiosk
--disable-pinch http://127.0.0.1:1000

I am guessing that I am a bit late for you, but for the next people who find this via google, the solution is actually pretty simple, by just using pure CSS.
The property you are looking for is touch-action and as explained by MDN:
The touch-action CSS property specifies whether, and in what ways, a
given region can be manipulated by the user via a touchscreen (for
instance, by panning or zooming features built into the browser)
A basic solution of disabling all pinch to zoom would be the following code snippet placed in your CSS.
body {
touch-action: none;
}
There are other options souch as pan-x, pan-left, pan-right, pan-y, pan-up, pan-down, pinch-zoom.
Check the full docs # https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Related

Modify default browser behavior so that images load in max resolution

I'd like to modify my browser (Firefox Quantum 57.0.1, 64-bit) so that images open in max resolution rather than auto-scaling to fit the browser window when I navigate to an image URL.
My programming background does not include any web development so I wouldn't know where to start on this project; I've experimenting with the developer tools console as a starting point. Based on the readout from the dev tools console and related posts here I am hypothesized that the HTML snippet <head><meta name="viewport" content="width=device-width; height=device-height;"> controls default auto-sizing that occurs when I open images. Is there a simple modification I can make to consistently open to max resolution instead of auto-sizing anytime I use the browser to look at a new image?
Am I on the right track? Can anyone provide some pointers? Is this a feasible browser modification?
NB: apologies to the inevitable senior user editing this post for incorrect tags or nomenclature - I don't have any experience in
Type about:config in the Firefox address bar
Search for browser.enable_automatic_image_resizing
Change it to false
source

Google Maps Javascript API Doesn't Respond to Touch Events in iOS 10

I run a website with a number of custom Google Maps built in (showing various locations on a map after a search or generating directions to/from a location). I use Google Maps Javascript API for this. My users have started reporting that on iOS 10, these maps no longer respond to touch events -- they cannot pinch-to-zoom nor can they click on the "pins" on the map to open the location info balloons.
I've been searching all over for others who have had this issue to no avail. I found one StackOverflow question here (http://webcache.googleusercontent.com/search?q=cache:DaiSdOgD0U4J:stackoverflow.com/questions/39401974/google-maps-javascript-doesnt-pan-or-zoom-in-ios-10+&cd=3&hl=en&ct=clnk&gl=us), but it was downvoted, then deleted. (Why?) A fresh search today still shows that page, but it leads to a 404, making a search even more frustrating.
Has anyone else experienced this? Is this a bug within the Google Maps API? I certainly can't find anything about that on their Developer website. Am I possibly doing something very wrong to lead to this? The code has worked for years and hasn't been modified in a few months now, so nothing changed on our end.
We do use an API key in our requests
I've tried switching from the
current release version (3.25) to the current experimental version
(3.26) with no changes in functionality.
Users report this happens in at least both Safari and Chrome on iOS 10
Just hoping someone can provide any insight at all on the issue.
Ok here is how I did to fix this issue.
As a reminder i'm using AngularJS via the Ionic framework.
I was calling the map this way in my index.html :
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=true"></script>
It seams like signed_in feature of google map is adding a layer on the map that is not letting the map getting the X,Y of your screen touch position.
I just replaced by false to disable the signed_in feature and its working like a charm
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=false"></script>

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

AppCache excruciatingly slow on iOS

I am developing a web-app utilizing Application Cache, and everything is working great on desktop browsers and on Android (even very old & slow android handsets). However downloading the appcache is taking much much much longer on iOS 6 in both Safari and Chrome.
My application cache total size is a mere 2.1Mb, and I have a pretty solid 70Mbps (download) internet connection. I would expect caching to be pretty rapid.
Here are my times so far:
Desktop Chrome: <1s (similar times for Safari & Firefox)
Android 2.3.3 Stock Browser: ~4s (similar times for Chrome & Dolphin)
Android 4.2.2 (Emulated): ~7s (running inside a PhoneGap app)
iPhone 4S 6.0 Safari: 8 minutes!!! (around the same in iOS Chrome too!!)
iPad 2 6.0 Safari: as above!!!
All of these devices are using the same wifi and internet connection, and my iPhone/iPad are otherwise functioning fine (no native apps exhibiting internet speed issues, and regular websites load just fine). There just seems to be something absolutely decimating AppCache download speed under iOS.
The window.applicationCache.status throughout this time is appCache.DOWNLOADING, and I have a progress event running counting the files as they are downloaded, so I'm certain that it is not stuck elsewhere. This just appears to be the time it takes to download. What gives?
Addendum : The iPhone also runs ridiculously hot, and the battery ticks down very quickly during this operation. It seems that something is causing the CPU to run flat-out during this download.
(Note: I can't publish a link to the web-app here as we're still in private beta, but if you would need to see it before you think you'd be able to help diagnose it, email me at the address in my profile and I'll send a link to the app).
Okay, I figured it out with the help of the iOS Emulator, and Xcode Instruments to profile it. (I'm not sure if I should add my solution into the main question, or as an answer, but I thought I'd do it this way as my question is already a little cluttered).
As it turns out, it was actually some erroneous javascript causing the issue, but apparently only on iOS.
The web-app is intended to only be a single page high (no vertical scrolling, except within specific DIVs), so in addition to the usual standard JS code for hiding the address bar...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
...I had also added in the following:
$(document).scroll(
function(e){
window.scrollTo(0, 1);
});
From looking at the profile results, I was able to see that a lot of time was being spent in scrollTo, so it immediately pointed to this as the cause. Why the scroll event was being triggered so much, I have no idea (this was occurring with no touching of the screen whatsoever).
My initial fix is to throttle that code, but I am now evaluating whether or not I even need it at all. Here is the code I have that fixes it for now (using jquery-debounce, which I was already using for something else):
$(document).scroll(
$.throttle(function(e){
window.scrollTo(0, 1);
})
, 10);
The download time of the application cache is now in line with the Android times. Phew!
The code is getting itself into an infinite loop, as the initial scrollTo function call triggers the scroll event handler, which then repeatedly re-triggers itself! My best guess is that the iOS JavaScript engine handles this infinite loop differently to the other browsers' JavaScript engines.

How to prevent google chrome android browser to display the magnifier when users click a button?

I'm building a simple html menu with unordered lists and I'm trying to prevent google chrome browser to display its magnifier every time I click a link.
The browser considers the li's to be too close from each other for the user to click it accurately. But I disagree!
How could I disable/cancel/prevent this behavior, other than setting a bigger padding on the li elements please? Is there even a way?
I think I found a way and it's so stupid I don't know how I didn't think of it sooner...
Just change the viewport meta tag to disable zooming on the page and the magnifier feature won't bother you anymore.
i.e.
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
I tested this on Galaxy Nexus and Galaxy Note with success. Any other input and feedback is welcome!
[EDIT]
After experimenting a lot with mobile UX I'd advise to... DESIGN BIGGER BUTTONS!
I don't think there is a way to disable this as it is a feature of the Android Chrome browser.
Unfortunately, the source code for Android Chrome browser isn't open source (yet) so I can't take a look.
You may find it useful to report a bug here: new.mcrbug.com
It seems to work with this CSS declaration:
-webkit-touch-callout:none;

Categories

Resources