diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 0ed6fa1c2a..c6a6c57043 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -7,7 +7,7 @@
 
 :host {
   --min-height: #{$item-md-min-height};
-  --background: var(--ion-item-background, transparent);
+  --background: #{$item-md-background};
   --background-activated: var(--background);
   --border-color: #{$item-md-border-bottom-color};
   --color: #{$item-md-color};
diff --git a/core/src/components/item/test/reorder/index.html b/core/src/components/item/test/reorder/index.html
index db8c4a35ee..b37de4a08b 100644
--- a/core/src/components/item/test/reorder/index.html
+++ b/core/src/components/item/test/reorder/index.html
@@ -113,7 +113,7 @@
       for (var i = 0; i < items.length; i++) {
         groupEl.innerHTML += `
           <ion-item onClick="clickedButton(${i})"
-            style="min-height: ${i * 2 + 35}px; background-color: rgb(${255 - i * 4}, ${255 - i * 4}, ${255 - i * 4})">
+            style="min-height: ${i * 2 + 35}px; --background: rgb(${255 - i * 4}, ${255 - i * 4}, ${255 - i * 4})">
             ${i}
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>`;
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index ca8dd4d44c..5ee5f54ebf 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -115,7 +115,7 @@ export const config: Config = {
   ],
   testing: {
     allowableMismatchedPixels: 200,
-    pixelmatchThreshold: 0.1,
+    pixelmatchThreshold: 0.05,
     emulate: [
       {
         userAgent: 'iPhone',