I am trying to make an image with a progress bar for my website. I want the background of .progressbar to be semi-transparent with a blur effect.
My current code works for small screens, but as soon as the @media query for large screens kicks in, the blur effect no longer works and the entire progress bar appears slightly blurry. This bug was not present when I tested in Chrome.
What’s even weirder is that when I remove the top-left border radius from redbox, the bug is magically fixed. I am so confused as to why these two things are correlated.
Below are some visuals and a simplified version of my website with the bug (you may have to resize the screen to see the difference). Could I get an explanation and a potential solution/workaround?
Image of desktop screen – unintended bug
Image of mobile screen – intended appearance
Image of desktop where redbox has no border radius and bug is gone
<code><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ca638ff1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
:root {
--headerheight: 55px;
}
p {
color: white;
margin: 0;
}
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
all {
padding-top: var(--headerheight);
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
width: 100%;
height: 100%;
}
header {
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: var(--headerheight);
box-sizing: border-box;
padding: 10px 18.5px;
gap: 5px;
z-index: 20;
}
main {
max-width: 100vw;
display: flex;
box-sizing: border-box;
}
sidebar {
position: sticky;
top: var(--headerheight);
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
flex-flow: column nowrap;
box-sizing: border-box;
z-index: 10;
overflow-y: auto;
flex-shrink: 0;
padding: 0 12px 12px 12px;
scrollbar-width: none;
}
/* desktop */
@media screen and (min-width: 1000px) {
sidebar {
display: flex;
}
header button#hamburgerDesktop {
display: flex;
}
header button#hamburgerMobile {
display: none;
}
redbox {
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
position: relative;
border-top-left-radius: 30px;
}
inner {
padding: 50px 50px 120px 50px;
position: absolute;
}
}
/* mobile */
@media screen and (max-width: 1000px) {
sidebar {
display: none;
}
header button#hamburgerDesktop {
display: none;
}
header button#hamburgerMobile {
display: flex;
}
redbox {
border-top-left-radius: 0;
min-height: calc(100vh - var(--headerheight));
}
inner {
padding: 30px 30px 120px 30px;
}
}
sidebar a {
display: flex;
gap: 18px;
padding: 16px 12px;
align-items: center;
font-size: 22px;
}
sidebar a i {
width: 38px;
text-align: center;
}
redbox {
display: flex;
background: #ffaca6;
flex-grow: 1;
box-sizing: border-box;
justify-content: center;
overflow-y: auto;
}
inner {
max-width: 1100px;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
min-width: min(100%, 1100px);
box-sizing: border-box;
background: rgba(255,255,255,0.1);
}
div.bluebox {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
padding: 30px;
background: #a6c1ff;
box-sizing: border-box;
gap: 30px;
flex-flow: row wrap;
align-items: center;
border-radius: 30px;
}
div.bluebox-left {
position: relative;
display: flex;
}
div.bluebox-left img {
max-width: 100%;
max-height: 150px;
border-radius: 20px;
}
div.progressbar {
border-radius: 99px;
border: 5px solid transparent;
display: flex;
width: min(150px, 80%);
justify-content: flex-start;
height: 15px;
background: hsl(274, 13%, 11%, 50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.progress {
background: white;
width: 75%;
}
</style>
</head>
<body>
<all>
<header>
<button id="hamburgerMobile"><i class="fa-solid fa-bars"></i></button>
<button id="hamburgerDesktop"><i class="fa-solid fa-bars"></i></button>
</header>
<main>
<sidebar>
<a><i class="fa-solid fa-home"></i></a>
<a><i class="fa-solid fa-cart-shopping"></i></a>
</sidebar>
<redbox>
<inner>
<div class="bluebox">
<div class="bluebox-left">
<img src="https://truespiritanimal.com/wp-content/uploads/2023/11/clownfish-41df3e33-1-1024x615.webp" />
<div class="progressbar">
<div class="progress"></div>
</div>
</div>
<button>Button</button>
</div>
</inner>
</redbox>
</main>
</all>
</body>
</html>
</code>
<code><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ca638ff1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
:root {
--headerheight: 55px;
}
p {
color: white;
margin: 0;
}
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
all {
padding-top: var(--headerheight);
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
width: 100%;
height: 100%;
}
header {
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: var(--headerheight);
box-sizing: border-box;
padding: 10px 18.5px;
gap: 5px;
z-index: 20;
}
main {
max-width: 100vw;
display: flex;
box-sizing: border-box;
}
sidebar {
position: sticky;
top: var(--headerheight);
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
flex-flow: column nowrap;
box-sizing: border-box;
z-index: 10;
overflow-y: auto;
flex-shrink: 0;
padding: 0 12px 12px 12px;
scrollbar-width: none;
}
/* desktop */
@media screen and (min-width: 1000px) {
sidebar {
display: flex;
}
header button#hamburgerDesktop {
display: flex;
}
header button#hamburgerMobile {
display: none;
}
redbox {
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
position: relative;
border-top-left-radius: 30px;
}
inner {
padding: 50px 50px 120px 50px;
position: absolute;
}
}
/* mobile */
@media screen and (max-width: 1000px) {
sidebar {
display: none;
}
header button#hamburgerDesktop {
display: none;
}
header button#hamburgerMobile {
display: flex;
}
redbox {
border-top-left-radius: 0;
min-height: calc(100vh - var(--headerheight));
}
inner {
padding: 30px 30px 120px 30px;
}
}
sidebar a {
display: flex;
gap: 18px;
padding: 16px 12px;
align-items: center;
font-size: 22px;
}
sidebar a i {
width: 38px;
text-align: center;
}
redbox {
display: flex;
background: #ffaca6;
flex-grow: 1;
box-sizing: border-box;
justify-content: center;
overflow-y: auto;
}
inner {
max-width: 1100px;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
min-width: min(100%, 1100px);
box-sizing: border-box;
background: rgba(255,255,255,0.1);
}
div.bluebox {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
padding: 30px;
background: #a6c1ff;
box-sizing: border-box;
gap: 30px;
flex-flow: row wrap;
align-items: center;
border-radius: 30px;
}
div.bluebox-left {
position: relative;
display: flex;
}
div.bluebox-left img {
max-width: 100%;
max-height: 150px;
border-radius: 20px;
}
div.progressbar {
border-radius: 99px;
border: 5px solid transparent;
display: flex;
width: min(150px, 80%);
justify-content: flex-start;
height: 15px;
background: hsl(274, 13%, 11%, 50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.progress {
background: white;
width: 75%;
}
</style>
</head>
<body>
<all>
<header>
<button id="hamburgerMobile"><i class="fa-solid fa-bars"></i></button>
<button id="hamburgerDesktop"><i class="fa-solid fa-bars"></i></button>
</header>
<main>
<sidebar>
<a><i class="fa-solid fa-home"></i></a>
<a><i class="fa-solid fa-cart-shopping"></i></a>
</sidebar>
<redbox>
<inner>
<div class="bluebox">
<div class="bluebox-left">
<img src="https://truespiritanimal.com/wp-content/uploads/2023/11/clownfish-41df3e33-1-1024x615.webp" />
<div class="progressbar">
<div class="progress"></div>
</div>
</div>
<button>Button</button>
</div>
</inner>
</redbox>
</main>
</all>
</body>
</html>
</code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ca638ff1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
:root {
--headerheight: 55px;
}
p {
color: white;
margin: 0;
}
html, body {
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
}
all {
padding-top: var(--headerheight);
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
width: 100%;
height: 100%;
}
header {
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: var(--headerheight);
box-sizing: border-box;
padding: 10px 18.5px;
gap: 5px;
z-index: 20;
}
main {
max-width: 100vw;
display: flex;
box-sizing: border-box;
}
sidebar {
position: sticky;
top: var(--headerheight);
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
flex-flow: column nowrap;
box-sizing: border-box;
z-index: 10;
overflow-y: auto;
flex-shrink: 0;
padding: 0 12px 12px 12px;
scrollbar-width: none;
}
/* desktop */
@media screen and (min-width: 1000px) {
sidebar {
display: flex;
}
header button#hamburgerDesktop {
display: flex;
}
header button#hamburgerMobile {
display: none;
}
redbox {
max-height: calc(100vh - var(--headerheight));
min-height: calc(100vh - var(--headerheight));
position: relative;
border-top-left-radius: 30px;
}
inner {
padding: 50px 50px 120px 50px;
position: absolute;
}
}
/* mobile */
@media screen and (max-width: 1000px) {
sidebar {
display: none;
}
header button#hamburgerDesktop {
display: none;
}
header button#hamburgerMobile {
display: flex;
}
redbox {
border-top-left-radius: 0;
min-height: calc(100vh - var(--headerheight));
}
inner {
padding: 30px 30px 120px 30px;
}
}
sidebar a {
display: flex;
gap: 18px;
padding: 16px 12px;
align-items: center;
font-size: 22px;
}
sidebar a i {
width: 38px;
text-align: center;
}
redbox {
display: flex;
background: #ffaca6;
flex-grow: 1;
box-sizing: border-box;
justify-content: center;
overflow-y: auto;
}
inner {
max-width: 1100px;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
min-width: min(100%, 1100px);
box-sizing: border-box;
background: rgba(255,255,255,0.1);
}
div.bluebox {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
padding: 30px;
background: #a6c1ff;
box-sizing: border-box;
gap: 30px;
flex-flow: row wrap;
align-items: center;
border-radius: 30px;
}
div.bluebox-left {
position: relative;
display: flex;
}
div.bluebox-left img {
max-width: 100%;
max-height: 150px;
border-radius: 20px;
}
div.progressbar {
border-radius: 99px;
border: 5px solid transparent;
display: flex;
width: min(150px, 80%);
justify-content: flex-start;
height: 15px;
background: hsl(274, 13%, 11%, 50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.progress {
background: white;
width: 75%;
}
</style>
</head>
<body>
<all>
<header>
<button id="hamburgerMobile"><i class="fa-solid fa-bars"></i></button>
<button id="hamburgerDesktop"><i class="fa-solid fa-bars"></i></button>
</header>
<main>
<sidebar>
<a><i class="fa-solid fa-home"></i></a>
<a><i class="fa-solid fa-cart-shopping"></i></a>
</sidebar>
<redbox>
<inner>
<div class="bluebox">
<div class="bluebox-left">
<img src="https://truespiritanimal.com/wp-content/uploads/2023/11/clownfish-41df3e33-1-1024x615.webp" />
<div class="progressbar">
<div class="progress"></div>
</div>
</div>
<button>Button</button>
</div>
</inner>
</redbox>
</main>
</all>
</body>
</html>
New contributor
SushiSquid is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.