What doesn't get saved & viewports

So, here's the issue. I have several elements on a layout. Whenever a layout loads or the browser gets resized, I run a function to position these elements based on the viewport variables.

Aside from the fact that this gets damned confusing because depending on how you resize the browser the Viewport vars can actually go into the negatives, I'm having issues with different behaviors on different machines using the same save file.

For example. On one machine, I can set the width of the element in the properties and it keeps that width regardless of the browser size. On the other machine, same save file mind you, when the browser width changes, the element's width changes.

Same thing with position. I tell it to position an element based on another element's x position and width. On one machine, it's position stays where it should when I resize the browser. On another, it moves left and right depending on the browser size.

Now I thought maybe this was because of resolution or some such. But I'm basing my location on fixed coordinates and not percentages.

On one machine, this perfectly positions and scales the SkillsInfoBox based on the location of the SkillsBox and it perfectly resizes the SkillsInfoBox based on browser size.

-> SkillsInfoBox: Set position to (SkillsBox.X+SkillsBox.Width , SkillsBox.Y)

-> SkillsInfoBox: Set width to ViewportRight(0)-SkillsInfoBox.X-20

On the other machine, in order to achieve the same effect, I have to do this:

-> SkillsBox: Set width to SkillsBox.X+750

-> SkillsInfoBox: Set position to (SkillsBox.X+980 , SkillsBox.Y)

-> SkillsInfoBox: Set width to ViewportRight(0)+ViewportLeft(0)-SkillsInfoBox.X-20

You'll note that these lines of code are quite different. On one, I can set positions and width based on the SkillsBox position and width and the Viewport vars. On the other, I have to manually set width's and I'm having to add in the ViewportLeft(0) in order to correctly calculate the element width.

So I can only come up with 2 reasons why this would happen. Either the viewport calculations are vastly different on one machine than they are on the other (which doesn't explain why an element resizes on one machine and not the other) or some setting that I'm totally missing isn't getting saved in the save file.

Here's a visual. The SkillsBox is on the left, the SkillsInfoBox is on the right with the red border (so I can see the x position and width better)

Still trying to figure this out. Here's some more details:

Taking a look at the HTML in Chrome developer there is a 'div' for most every element. The div for the skillbox looks like this:

<div sa-uid="53" id="" style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); font-weight: normal; font-style: normal; text-align: center; border-radius: 0px; padding: 0px; overflow: hidden scroll; transform-origin: left top; opacity: 1; position: absolute; left: 460px; top: 393px; width: 950px; height: 376px; transform: rotate(0deg);">

Wow, but I see what you're saying.

I have an on browser resize event that calls a function to handle the resizing. I also call that function on the start of any layout.

I did some testing and put the ViewportLeft and ViewportWidth into a text box just before it called the function. Well into the function is where I resize one of the HTMLElements and I grabbed the ViewportLeft and Width again and put them in a different text box. If I slowly resized I was seeing maybe a 0.5 - 3px difference. But, if I did a quick drag and release resize, I was seeing 50-100px differences.

If I clicked on the full-screen request button, the px differences were pretty huge, like 500px+

Now, whether this is affecting that CSS div, I dunno.

More digging.

It appears the plugin is changing that CSS. Here's the code it's using to determine the height and width for that CSS. Unfortunately, I don't know JS that well. If anyone could look over this and see if this somehow explains why the height and width on one computer is different from another.

 DrawSize()
 {

 if (!this.domStructure.useC3size) return;

 const exWidth = Dom.width(this.el);
 const exHeight = Dom.height(this.el);

 const wi = this._inst.GetWorldInfo();
 const layer = wi.GetLayer();


 const myinstance = this._inst.GetWorldInfo();
 const instWidth = myinstance.GetWidth();
 const instHeight = myinstance.GetHeight();
 const newWidth = Math.abs(layer.LayerToDrawSurface(instWidth, 0)[0]);
 const newHeight = Math.abs(layer.LayerToDrawSurface(0, instHeight)[1]);

 if (exWidth !== newWidth || exHeight !== newHeight || this.memory.resizeWindowForSize)
 {
 this.memory.resizeWindowForSize = false;
 this.SetStyle(
 {
 'width': newWidth + 'px',
 'height': newHeight + 'px'
 });
 }
 }

 this.memory = {
 // objectModel
 instVarNames: getArrayFromString(proprieta(contatore, "[]")),
 objectStore: getArrayFromString(proprieta(contatore + 1, "[]")),
 text: "", // per modificare il contenuto del dom solo quando il text cambia
 resizeWindowForSize: true,
 resizeWindowForPosition: true,
 resizeWindowForRotation: true,
 resizeWindowForFontSize: true,
 lastFileURL: "",
 lastBLOB: "",
 lastBase64: ""
 };

 window.onresize = () => {
 this.memory.resizeWindowForSize = true;
 this.memory.resizeWindowForPosition = true;
 this.memory.resizeWindowForRotation = true;
 this.memory.resizeWindowForFontSize = true;
 };