Enabling the apple-mobile-web-app-capable feature prevents SVG touches from registering

Looking to enhance touch functionality on an SVG element.

The touch event detection is done using a jQuery-like selector. (Currently utilizing angular JQLite - angular.element()):

.on("mousedown touch", function(event) {

No problems with recognition of touches on desktop and mobile Safari. It works fine even when saved as a bookmark, but including:

<meta name="apple-mobile-web-app-capable" content="yes" />

in the header, saving it to the home screen.. causes the touch component to malfunction.

Seeking insights into the root cause of this issue or any potential workarounds. Currently running Angular 1.2.27 on iOS 8.

javascriptangularjssvgios8mobile-safari

Answer №1

To resolve the problem, I found a workaround by integrating an ng-click directly into the SVG element.

It seems that this issue may be related to Angular's JQLite handling of click/mousedown/touchstart events, or it could be due to a lack of support for certain touch events in ng-click.

Answer №2

Include these lines in your CSS file.

svg {
    pointer-events: none;
}

With this addition, it should now be functional.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a functional component to incorporate a "load more" button in ReactJS

Hey everyone, I've come across this ReactJS code that I need some help with: function DisplaySolutions({solutions}) { const topSolutions = solutions.slice(0, 4); const remainingSolutions = solutions.slice(4); const [isD ...

javascriptreactjs

AngularJS retrieves JSON data using $http.get

Incorporating a dx-chart into an AngularJS file has been my current project. My goal is to utilize $http.get within my ng-controller. The code snippet below showcases the AngularJS file structure. Despite my efforts to integrate $http.get, the chart render ...

model-view-controllerhttpangularjs

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

javascriptcssreactjsstylesjsx

Preventing the occurrence of empty nested arrays within the state

I am currently working on a React Redux application where I am adding movies and including images as a nested array within my object. Here is what my state looks like after adding an item: { movies: [ { "title": "asda", "director": "as ...

javascriptreactjsreduxreact-redux

Inter-component communication within nested structures in Angular 2

Working on an Angular2 project that involves multiple nested components, I have successfully sent data from a child component to its immediate parent. However, when dealing with three levels of nesting, the question arises: How can I send or modify data ac ...

javascriptangulartypescriptcomponents

The Importance and Purpose of Incorporating a Callback

Understanding asynchronous operations and callbacks has been a challenge for me. To improve my familiarity with these concepts, I've been studying code examples that utilize them. However, there's one aspect of this specific code snippet that con ...

javascriptnode.jsasynchronouscallback

The nested list gets clipped by the parent list item when the slide animation is triggered

I am currently in the process of developing an Ionic application that involves nested lists of comments. My goal is to animate replies as child elements while maintaining their state. At the moment, I am using a basic directive with jQuery slideToggle, but ...

angularjsnestedangularjs-animation

Transforming an unordered list to function similarly to a select input

I am looking to style a ul list to function as a select form element. I have successfully populated a hidden input using my code. Now, I am trying to make the ul behave like a select input when either the keyboard or mouse is used. Previously, I had some ...

javascriptjqueryhtml

What steps can I take to avoid encountering this endless loop?

When passing foo in the arguments of useEffect to use existing array values, it causes an infinite loop because setting new values triggers the f() function again. How can this be resolved? An example of imaginary code is: const [foo, setFoo] = useState&l ...

javascriptreactjsuse-effectinfinite-loop

Steps for adding an svg file to a ThreeJS environment

I've noticed the SVGLoader in the documentation, but I can't seem to find it in r71. Would compiling master be necessary to access this feature? Is there a more efficient method to achieve this task? Seeking the optimal approach for implementati ...

svgthree.js

Ways to disable an AJAX loading animation

In my current script, I am loading external content using the following code: <script type="text/javascript"> var http_request = false; function makePOSTRequest(url, parameters) { // Code for making POST request } function alertContents() { ...

javascriptajaxformsxmlhttprequestloading

Confirm whether the Iterator type is the same as the AsyncIterator type

Is there a clever JavaScript technique to differentiate between Iterator and AsyncIterator without initiating the iteration process? I'm attempting to create a type checker like this: function isAsyncIterator<T>(i: Iterator<T> | AsyncIter ...

javascripttypescriptiterator

Issue with RN-fetch-blob regarding base64 encoding specifically on Android devices

I've encountered an issue in React Native where I'm trying to download a base 64 string from an API and display it as a PDF on mobile devices. The problem arises when using the code on Android, as it returns a 'bad base 64' / invalid P ...

javascriptandroidreact-nativern-fetch-blob

Challenges regarding placement and z-index are causing issues

Currently, I am attempting to make the menu overlap the content on my webpage. However, I am facing an issue where it moves the content box instead of overlapping it. I have already experimented with the position: relative concept, but unfortunately, the ...

javascriptjqueryhtmlcss

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

javascriptcssintersection-observer

Can I incorporate NodeJS modules such as "oauth" into my Firefox extension?

I am diving into the world of Firefox addons for the first time. My project entails making calls to Twitter's APIs, which means I require an oauth library to kick things off. After some research, I came across an existing library in the npm package r ...

javascriptnode.jsfirefoxoauthfirefox-addon

Getting the button element in Angular when submitting a form

My web page contains multiple forms, each with a set of buttons. I want to incorporate a loading spinner on buttons after they are clicked. When using a regular click event, I am able to pass the button element: HTML <button #cancelButton class="butto ...

javascriptangular

Trigger an event upon completion of a write operation in AngularJS

I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...

javascriptajaxangularjs

The ng-if directive inside my ng-repeat loop is not successfully filtering my array

Hello everyone, I am attempting to create tabs displaying values from my types array which contains: [{"label":"wlan1","type":"wlan1"}, {"label":"br-wlan","type":"br-wlan"}, {"label":"tun_cas","type":"tun_cas"}, {"label":"nfacct_bytes","type":"nfacct_b ...

angularjsangularjs-ng-repeatangular-ng-if