diff --git a/projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts b/projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts
index 5401cbe49dc..a523c8cd9da 100644
--- a/projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts
@@ -86,7 +86,8 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
             closeOnEscape: false,
             closeOnOutsideClick: false,
             modal: false,
-            outlet: this.outlet
+            outlet: this.outlet,
+            cacheSize: false
         };
 
         super.open(overlaySettings);
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
index 33a59cbf661..435933102ef 100644
--- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
@@ -407,6 +407,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._overlayDefaults.positionStrategy = new TooltipPositionStrategy(this._positionSettings);
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
+        this._overlayDefaults.cacheSize = false;
 
         this.target.closing.pipe(takeUntil(this._destroy$)).subscribe((event) => {
             if (this.target.tooltipTarget !== this) {
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
index 65fbdebe537..1a553f153b8 100644
--- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
+++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
@@ -613,7 +613,8 @@ describe('igxOverlay', () => {
                 scrollStrategy: new NoOpScrollStrategy(),
                 modal: true,
                 closeOnOutsideClick: true,
-                closeOnEscape: false
+                closeOnEscape: false,
+                cacheSize: true
             };
 
             spyOn(overlayInstance.contentAppending, 'emit');
@@ -3549,7 +3550,7 @@ describe('igxOverlay', () => {
         }));
 
         // 4. Css
-        it('Should use component initial container\'s properties when is with 100% width and show in overlay element',
+        it('Should use component initial container\'s properties based on cacheSize when it\'s with 100% width and shown in overlay element',
             fakeAsync(() => {
                 const fixture = TestBed.createComponent(WidthTestOverlayComponent);
                 fixture.detectChanges();
@@ -3568,6 +3569,15 @@ describe('igxOverlay', () => {
                 // content element has no height, so the shown element will calculate its own height by itself
                 // expect(overlayChild.style.height).toEqual('100%');
                 // expect(overlayChild.getBoundingClientRect().height).toEqual(280);
+
+                fixture.componentInstance.overlaySettings.cacheSize = false;
+                fixture.componentInstance.buttonElement.nativeElement.click();
+                tick();
+                const componentElement2 = fixture.componentInstance.customComponent.nativeElement;
+                expect(componentElement2.style.width).toEqual('100%');
+                expect(componentElement2.getBoundingClientRect().width).toEqual(123);
+                // Check overlay content element width
+                expect(componentElement2.parentElement.getBoundingClientRect().width).toEqual(123);
                 fixture.componentInstance.overlay.detachAll();
             }));
     });
@@ -4723,7 +4733,7 @@ export class TwoButtonsComponent {
     <div style="width: 420px; height: 280px;">
         <button class='300_button' igxToggle #button (click)='click($event)'>Show Overlay</button>
         <div #myCustomComponent class="customList" style="width: 100%; height: 100%;">
-            Some Content
+            <p style="width: 123px;">Some Content</p>
         </div>
     </div>`,
     styles: [`button {
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
index e8e511fb15c..bdf1456a601 100644
--- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
+++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
@@ -138,7 +138,8 @@ export class IgxOverlayService implements OnDestroy {
         scrollStrategy: new NoOpScrollStrategy(),
         modal: true,
         closeOnOutsideClick: true,
-        closeOnEscape: false
+        closeOnEscape: false,
+        cacheSize: true
     };
 
     constructor(
@@ -344,11 +345,18 @@ export class IgxOverlayService implements OnDestroy {
         info.settings = eventArgs.settings;
         this._overlayInfos.push(info);
         info.hook = this.placeElementHook(info.elementRef.nativeElement);
-        const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
-        info.initialSize = { width: elementRect.width, height: elementRect.height };
+        let elementRect: DOMRect;
+        // Get the element rect size before moving it into the overlay to cache its size.
+        if (info.settings.cacheSize) {
+            elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        }
         // Get the size before moving the container into the overlay so that it does not forget about inherited styles.
         this.getComponentSize(info);
         this.moveElementToOverlay(info);
+        if (!info.settings.cacheSize) {
+            elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        }
+        info.initialSize = { width: elementRect.width, height: elementRect.height };
         // Update the container size after moving if there is size.
         if (info.size) {
             info.elementRef.nativeElement.parentElement.style.setProperty('--ig-size', info.size);
diff --git a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts
index 3286909a8f2..18d4ab968c8 100644
--- a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts
+++ b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts
@@ -113,6 +113,12 @@ export interface OverlaySettings {
      * Clicking on the elements in this collection will not close the overlay when closeOnOutsideClick = true.
      */
     excludeFromOutsideClick?: HTMLElement[];
+    /**
+     * @hidden @internal
+     * Controls whether element size is measured before (true) or after (false) moving to the overlay container.
+     * Default is true to retain element size.
+     */
+    cacheSize?: boolean;
 }
 
 export interface OverlayEventArgs extends IBaseEventArgs {