diff --git a/resources/skins.citizen.styles/components/Dropdown.less b/resources/skins.citizen.styles/components/Dropdown.less
index 2d0e73d99..c29f5a08b 100644
--- a/resources/skins.citizen.styles/components/Dropdown.less
+++ b/resources/skins.citizen.styles/components/Dropdown.less
@@ -1,12 +1,15 @@
 .citizen-dropdown {
 	.citizen-menu__card {
 		z-index: @z-index-dropdown;
+		content-visibility: hidden;
 		max-width: 80vw;
 		transition-timing-function: var( --transition-timing-function-ease-in );
 		transition-duration: var( --transition-duration-base );
-		transition-property: transform;
+		transition-property: transform, content-visibility;
+		transition-behavior: allow-discrete;
 
 		> * {
+			opacity: 0;
 			transition-timing-function: var( --transition-timing-function-ease-in );
 			transition-duration: var( --transition-duration-base );
 			transition-property: opacity;
@@ -58,6 +61,7 @@
 	&-details {
 		&[ open ] {
 			+ .citizen-menu__card {
+				content-visibility: visible;
 				transition-timing-function: var( --transition-timing-function-ease-out );
 				transition-duration: var( --transition-duration-medium );
 				transform: none;
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
index 0d1b9123e..c2493867f 100644
--- a/resources/skins.citizen.styles/components/Menu.less
+++ b/resources/skins.citizen.styles/components/Menu.less
@@ -14,10 +14,6 @@
 		box-shadow: var( --box-shadow-drop-xx-large );
 		transform: scale( 0 );
 		contain: content;
-
-		> * {
-			opacity: 0;
-		}
 	}
 
 	&__heading {
@@ -80,6 +76,7 @@
 	height: var( --size-icon );
 	min-height: var( --size-icon );
 	contain: strict;
+	content-visibility: auto;
 
 	&::before {
 		display: block;