reset ideal width and height on serialization (#16084)

* reset ideal width and height on serialization

* stay safe

Author: RaananW

packages/dev/gui/src/2D/controls/control.ts

@@ -2598,7 +2598,6 @@ export class Control implements IAnimatable, IFocusableControl {
     public clone(host?: AdvancedDynamicTexture): Control {
         const serialization: any = {};
         this.serialize(serialization, true);
-
         const controlType = Tools.Instantiate("BABYLON.GUI." + serialization.className);
         const cloned = new controlType();
         cloned.parse(serialization, host);
@@ -2634,6 +2633,16 @@ export class Control implements IAnimatable, IFocusableControl {
         if (!this.isSerializable && !force) {
             return;
         }
+        let idealWidth = 0;
+        let idealHeight = 0;
+        // the host's ideal width and height are influencing the serialization, as they are used in getValue() of ValueAndUnit.
+        // for a proper serialization, we need to temporarily set them to 0 and re-set them back afterwards.
+        if (this.host) {
+            idealHeight = this.host.idealHeight;
+            idealWidth = this.host.idealWidth;
+            this.host.idealWidth = 0;
+            this.host.idealHeight = 0;
+        }
         SerializationHelper.Serialize(this, serializationObject);
         serializationObject.name = this.name;
         serializationObject.className = this.getClassName();
@@ -2662,6 +2671,11 @@ export class Control implements IAnimatable, IFocusableControl {
 
         // Animations
         SerializationHelper.AppendSerializedAnimations(this, serializationObject);
+        // re-set the ideal width and height
+        if (this.host) {
+            this.host.idealWidth = idealWidth;
+            this.host.idealHeight = idealHeight;
+        }
     }
 
     /**