bug: Chrome / Edge renders transparent iframe background as white (works correctly in Stackblitz) #4450
Description
Reproduction URL (Required)
https://stackblitz.com/edit/daisyui5-2uarqxs7?file=package.json,index.html
What version of daisyUI are you using?
5.5.19
Which browsers are you seeing the problem on?
Chrome
Describe your issue
Issue
Even though the iframe background is explicitly set to transparent, Chrome / Edge render the iframe background as white.
However, in Playwright (Chromium) and StackBlitz (Chromium), the iframe correctly appears transparent and the parent background color is visible.
Environment
Chrome (accessed via VSCode port forwarding)
Edge (accessed via VSCode port forwarding)
Playwright (Chromium)
StackBlitz page (Chromium)
Minimal Tailwind setup
daisyUI is NOT used inside the iframe
Library Versions
vite 7.3.1
@tailwindcss/vite 4.2.0
tailwindcss 4.2.0
daisyui 5.5.19
Reproduction
Parent page (index.html)
<!DOCTYPE html>
<html>
<head>
<title>daisyUI</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@import "tailwindcss";
@plugin 'daisyui';
html {
background-color: transparent !important;
}
</style>
</head>
<body class="bg-red-500 text-white h-screen">
<div class="text-red-500">TEST</div>
<iframe class="w-full h-96 rounded-md border-0 bg-transparent"
src="iframe.html" ></iframe>
</body>
</html>Child page (iframe.html)
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,
body {
background-color: transparent !important;
}
</style>
</head>
<body>
TEST
</body>
</html>Expected Behavior
The iframe should appear transparent and display the parent background color (bg-red-500).
Actual Behavior
• In Chrome / Edge (via VSCode port forwarding), the iframe background is rendered white.
• In Playwright (Chromium) and StackBlitz (Chromium), the iframe appears transparent and the parent background is visible.