Mysterious flickering black line, almost like a border in NextJS

Question

I have created a full-width video header that I've used successfully over several pages. For the life of me, I can't figure out why it has chosen JUST NOW to give me an issue! I'm getting a thin black line around the bottom and right side of the div (.header) containing the video. There is NO border property anywhere. NO background color property anywhere. I just can't figure out why this is happening...it's now happening on all site pages.

Could it be the conditionally rendered
s? Gonna try that out in a minute.

JSX below. I tried to Loom a video, but the black bars did not show up in the video...what the heck!

import React from "react";
import { Heading, Box } from "@chakra-ui/react";

const TestVideoHeader = ({
  title = `Holland Hames`,
  title1,
  title2,
  title3,
  title4,
  video = "/video/full-width-intro.mp4",
  mobileVideo = "/video/mobile-intro.mp4",
  fontFamily = "Acumin-Pro",
  color = "black",
  mobileColor = "white",
  mt = "-7%",
  stroke = "#fff",
  shadow="false"
}) => {
  title = title.toUpperCase();
  title1 = title.split(" ").slice(0, 1).join(" ");
  title2 = title.split(" ").slice(1, 2).join(" ");
  title3 = title.split(" ").slice(2, 3).join(" ");
  title4 = title.split(" ").slice(3, 4).join(" ");
  return (
    <>
    
      <div className='d-none d-lg-block'>
        <div className='header'>
          
          <video
            playsInline
            autoPlay
            muted
            loop
            src={video}
            type='video/mp4'
          />

        </div>
        <Heading
          as='h1'
          color={color}
          fontSize={["4rem", "5rem", "5.5rem", "7rem", "7.5rem", "8rem"]}
          fontFamily={fontFamily}
          lineHeight='90%'
          zIndex='banner'
          pos='absolute'
          mt={mt}
          style={{
            WebkitTextStroke: `.7pt ${stroke}`,
            WebkitTextFillColor: `${color}`,
            color: `${color}`,
            
          }}>
          {title1} {title2 ? <br /> : null} {title2} {title3 ? <br /> : null}
          {title3} {title4 ? <br /> : null} {title4}
        </Heading>

       
      </div>
    </>
  );
};

And here's the CSS:

.header {
  position: relative;
  min-height: 75vh;
  width: 100vw;
  overflow: hidden;
}
.header video {
  position: absolute;
  overflow:hidden;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100% !important;
  height: auto !important;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

Answer 1

I am not getting the black line. I suggest deleting the yarn and cache files and running yarn again. Then re run your server.