Issue with Chrome related to svg getScreenCTM function

Check out the jsFiddle demo

I am attempting to utilize the getScreenCTM function to retrieve the mouse position based on SVG image coordinates. It seems to work in IE and Firefox, but not in Chrome.

When I define the attributes width and height in the SVG element and then adjust them using CSS, it appears that getScreenCTM always returns the unscaled matrix (based on the original size?).

In summary:

Did I make a mistake somewhere? Or is this a bug specific to Chrome?

Answer №1

A bug was reported after encountering the same issue, which can be found here: https://example.com/bug-report-12345

To see a demonstration of the problem, check out this link: http://example.com/demo/1

This problem started in Version X and has been resolved in Version Y.

A temporary fix has been implemented for this issue and will hopefully be included in an upcoming update.

Unexpectedly, the same issue has been observed on mobile devices running iOS 8.

UPDATE: A workaround for this bug can be found at: http://example.com/workaround/1

UPDATE 2: The bug has been fixed in the latest version as of the release date of YYYY-MM-DD.

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 the Data Fetched from a Factory GET Request in an AngularJS Controller

Recently, I developed an Angular factory specifically designed for fetching JSON data. Utilizing the $resource alongside the get method has allowed me to successfully retrieve a JSON object from the server. Within this object are multiple child objects tha ...

Exploring the capabilities of storing and retrieving nested objects within a React database

I'm having trouble retrieving nested items from my database. This is how my database is structured: GET /dwelling/room/ [ { "room_id": 1, "room_name": "Living Room", "room_data": [ { "id": 1, ...

What is the method for selecting an element using CSS code in Protractor?

Having trouble clicking on the element with CSS Selector: <button _ngcontent-c16="" class="btn btn-flat btn-no-text btn-kebab-view"> <i _ngcontent-c16="" class="zmdi zmdi-more-vert"></i> </button> This is what I've t ...

Tips for Personalizing Bootstrap 4.3 Through BootstrapCDN

I'm having trouble customizing the Bootstrap 4.3 BootstrapCDN by linking an external CSS file to override it. Even though I have placed the custom CSS file below the Bootstrap one, it doesn't seem to be taking effect. Can anyone explain why? Th ...

Unable to assign unique identifiers to elements within a user interface framework

I am having difficulty assigning an id to components. Scenario 1: - Trying to assign an id to an HTML component. <h1 id="demo-h1">Demo Heading</h1> Assigning id to HTML component Scenario 2: - Attempting to assign an id to a componen ...

What is the best way to initiate a class constructor with certain parameters left out?

Currently, I am facing a challenge while trying to pass various combinations of arguments to a class constructor. The constructor has 2 optional arguments. Here is the code snippet: class MyClass { foo(a, b) { return new MyClass(a, b); } bar( ...

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

Guide on adding the contents of non-empty <td> tags using Javascript or JQuery

My goal is to calculate the total sum of all the HTML content within <td> elements with the attribute name='gross_val'. Here are the <td> elements I am working with: <tr><td name="gross_val" align="right" title="gross_val1" ...

Adjust the height of a DIV element using Jquery Resizable to a minimum height of 1px, smaller than its default value

Having an issue with the Jquery UI Resizable functionality. I've implemented Jquery resizable to adjust a div's width and height dynamically. It's been working well, but I'm encountering a problem when attempting to decrease the height ...

Incorporate JSON when adding a new row to the database using Ruby On Rails

Greetings, fellow developers! I am currently working on an application with a backend in Rails. My goal is to create a user from an AJAX request and have the server return a JSON object containing the newly saved user information. Below is my Rails code s ...

Strip the quotes from MVEL's @foreach when iterating over a string array

I am currently using the @foreach Orb notation within MVEL to loop through a string array. someArrayPartOfAJSONObject = ["Item 1", "Item 2"] <ul> @foreach{item: someArrayPartOfAJSONObject} <li>@{item}</li> </ul> However, when ...

Having trouble retrieving the tag name, it seems to be giving me some difficulty

I have two separate web pages, one called mouth.html and the other nose.html. I want to retrieve a name from mouth.html and display it on nose.html when a user visits that page. How can I accomplish this using JavaScript? Here is the code snippet from mou ...

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

<li class="btn-group" mdbDropdown> <a mdbDropdownToggle id="ParentId"> <i class="nav-item"></i> MainMenu <i class="fa fa-angle-down"></i> </a> <div class=" ...

Easy PHP navigation options

Creating a basic PHP page with includes is proving challenging when it comes to navigating URLs using '../' to find the correct path to the folder. Is there a straightforward way to set up a simple PHP navigation without involving MySQL or other ...

Accessing the jQuery Ajax success variable

I have a PHP function that returns an array with an element error containing the value 'ERR': var updatePaymentType = function(plan_pt_id, pt_id){ var error = null; var data = new Object() data["function"] = "update"; ...

Using Leaflet JS to implement multiple waypoints on a map

I am trying to create a route with multiple waypoints without hardcoding any data. My waypoints array should dynamically include latitude and longitude values. How can I achieve this? var data = [ { "title": 'Chennai', " ...

Creating objects in Angular 2 through HTTP GET calls

Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...

Creating consistent div sizes for varying image and title lengths in bootstrap

In my angular project, I am receiving data in the form of image, title, and location. Despite my efforts to create a responsive div, I have been unsuccessful in achieving uniform sizes. <div *ngFor="let company of companies" class=" ...

Switching my Bootstrap navbar to a Right-to-Left layout

Currently working on creating a navbar that needs to go from Right to Left for Hebrew language compatibility. Experimenting with a responsive navbar layout where the linked buttons align on the Left and move towards the Right. Want to have the brand logo ...