Issue with positioning in Excanvas VML

After struggling through the implementation of excanvas on ie8, I managed to sort out the dynamic element issue. The once hidden elements are now rendering properly throughout most of the app, but just when it seemed like all was going well, another problem arose. The vml items rendered inside the div generated by excanvas are all offset by a large amount.

I finally discovered what was causing this by setting overflow:visible on all children of canvas, which made the offset vml visible.
I have a screenshot of the problematic elements; the blue area is where the generated div should be positioned correctly, and the red-bordered items should be within that blue area.

Has anyone else experienced this issue before, and if so, were you able to find a solution?

Cheers!

javascriptcssexcanvas

Answer №1

If you ever come across this particular error, it appears that the problem lies within a translate() function. Even though I had implemented save and restore functions, and typical canvas implementations interpreted the translate function correctly, excanvas kept adding to the translation persistently.

To resolve this issue, I made sure to reset the identity matrix before executing the save, translate, and restore functions.

context.setTransform(1,0,0,1,0,0);

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

Tips on setting up a dropzone upload feature with a click-trigger option

Is there a way to configure dropzone.js so that the file is uploaded only when a submit button is clicked, rather than automatically? Here's the code snippet I am currently using: $('#myDropzone').dropzone({ url: SITE_URL + 'self_r ...

javascriptphpjquery

Ways to conceal a component based on a specific condition?

In my Angular 8 application, I need to dynamically hide a component based on a specific condition. The condition I want to check is: "status === EcheqSubmissionStatus.EXPIRED" Initially, I attempted the following approach: EcheqProcessComponent templat ...

javascriptangulartypescript

Accessing a JavaScript object outside of its containing JavaScript file within a Dojo

I am working on a Dojo application that includes a Dgrid. My objective is to send the javascript containing the dgrid data to the server. However, I am encountering difficulties in accessing the javascript object beyond the file where it is defined. The a ...

javascriptscopedojodgrid

ensure that the element matches the height of its parent element

Allow me to illustrate the issue with a visual aid. In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmar ...

css

How to invoke a function from a different ng-app in AngularJS

I have 2 ng-app block on the same page. One is for listing items and the other one is for inserting them. I am trying to call the listing function after I finish inserting, but so far I haven't been successful in doing so. I have researched how to cal ...

javascriptangularjsangularjs-directiveangularjs-scope

Google Locations API + React JS + Node.js data not returning

I would like to express my gratitude in advance for any assistance provided. I am currently exploring the development of an application using data from the Google Places web services API. I am utilizing AngularJS, PHP, and HTML for this project. Unfortunat ...

javascriptphpangularjsgoogle-places-api

What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

My JSON structure looks like this: 101 : "List": [ { "Name": "Pink" }, { "Name": "Black" } ] 102 : "List": [ { "Name": "Red" }, { "Name": "Yellow" } ] $sco ...

javascriptangularjsangularjs-ng-repeatng-options

Is it more efficient to use Vue events or Vuex for transmitting data between components?

Working on a project where data needs to be shared between components in order to update a canvas element at 30-60fps for optimal performance on low-end devices. Currently utilizing Vuex store/get method for data transfer, but considering using events as ...

javascriptperformancevue.jsvuex

Explore the Bootstrap 4 navbar featuring a search option strategically placed on the right side, accompanied

I'm currently working on designing a navbar that includes a Search option and Login options. My goal is to have the Search bar aligned to the right, just before the Signup link. Any assistance with this would be greatly appreciated. Thank you in adva ...

javascriptcssbootstrap-4

Add the content of a JavaScript variable to a label without using any scripting

Is there a way to concatenate the value of a JavaScript variable with a label without utilizing jQuery? For example: Var global_message = "1234"; <label id="my-label">Test</label> I desire the concatenated value "Test1234" to be displayed o ...

javascripthtml

Leverage the power of Vuex within your Nuxt application

I successfully obtained and displayed data using Nuxt's Fetch API, but now I'm looking to transition to using Vuex instead. store/index.js: import Axios from 'axios' export const getters = { isAuthenticated: (state) => { retu ...

javascriptvue.jsnuxt.js

Creating a file logging system with console.log() in hapi.js

I have recently developed an Application with Hapi.js and have utilized good-file to record logs into a file. However, I am facing an issue where the logs are only written to the file when using request.log() and server.log() methods. My goal is to also lo ...

javascriptnode.jsnpmhapi.js

Making an API request in React based on user input

As a beginner, I am in the process of creating a simple weather application. However, the code below is not functioning as expected. I need assistance in getting user input and submitting it. Can someone please provide guidance? class App extends Component ...

javascriptreactjsapi

Retrieve the document from the HTTP response in NodeRed

Working with Node-Red, I'm facing a challenge wherein I need to retrieve a csv file through an API call. Upon making the http request, I received the following response: { "_msgid": "60d0351dcf215557", "payload": "&q ...

javascripthttpnode-red

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

I attempted to replicate the math used for the previous image cuts and added my own image, but it appears blank. Can you identify where the issue lies? #paymentForm { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webk ...

htmlcss

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

htmlcss

The cascade of CSS elements arrangement

I have two unique boxes set up like this: <div id="box1"></div> <div id="box2"></div> The second box, box2, has a border and I'm looking to cover the top border with box1. To achieve this, I've applied a negative margin- ...

csslayer

Turn off info windows for businesses and other points of interest, except for those within your own polygons on Google Maps

Is there a way to make only the infowindows attached to my polygons clickable on Google Maps? I don't want Points of Interests like Restaurants to have clickable infowindows. I tried changing the map style to hide business labels, but infowindows stil ...

cssgoogle-mapsgoogle-maps-api-3infowindow

Timing feature utilized in a Web Application

My latest project involves developing a web-based testing application using CakePHP. Here's how it works: when a user starts a test, the exact start time is stored on the web server. Once the test is completed and the answers are submitted, the serve ...

javascriptajaxcakephptimer

What is the process of rotating a vector by 90 degrees to align it with a perpendicular plane, and then adjusting it further by 15 degrees out of

My ultimate objective is to determine a vector that represents the direction of the green line depicted in the image below, based solely on the positions of the yellow and green dots. To clarify, the angle of the vector can vary as long as its endpoint ...

javascriptthree.js3d