box-shadow blur causes gap around fixed header element

Got a weird issue. Have a fixed header, and apply a box shadow on the bottom of it. If I use blur (as one would) on the shadow, a tiny gap appears around the header, through which scrolling elements behind the header become visible. It's kind of visible at the top and left of the attached screenshots. Bit of an issue when adding a dropdown menu below the header.

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

KP-C

Kevin Powell - Community•2y ago

Ma-Kas

box-shadow blur causes gap around fixed header element

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

.page_header {
  z-index: var(--z-index-header);
  font-family: var(--font-family-book);
  font-size: var(--font-size-header);
  background-color: var(--color-page-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-header-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--page-padding-horizontal);
  box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.05),
    0 10px 5px -5px rgba(0, 0, 0, 0.05), 0 7px 7px -7px rgba(0, 0, 0, 0.04);
}

box-shadow blur causes gap around fixed header element

Similar Threads

box-shadow blur causes gap around fixed header element

Similar Threads

Similar Threads

Similar Threads