I have a few pages that have the frosted glass affect applied to the content area of the page. My problem is that the frosted glass affect does not show on normal google chrome, but does show when I go into incognito mode on google chrome. I've tested it quite a few times now to see if its just because its cached.

I changed the background picture and ran it through normal chrome and that change registered but frosted affect still made no appearance. Have I done something wrong with my code or is my computer glitching.

.content {
  padding: 55px;
  margin: 100px auto;
  font-family: calibri;
  width: 30rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
}

.content:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}

<div >
  <center>
    <h1> Please enter your login information </h1>
  </center>
  <form name="login" action="" method="post">
    <label for="email"> <b>Enter your email</b> </label>
    <input type="text" name="email" size="48">
    <label for="password"> <b>Enter Your Password </b> </label>
    <input type="password" name="password" size="48">
    <button type="submit" name="submit"> Login </button>
    <span > <a href = "frgtpas.php"> Forgot  password? </a> </span>
  </form>

CodePudding user response：

Your css file is cached in browser. Plese press "Ctrl Shift R" to hard refresh your browser so that it load updated CSS. Otherwise, I have checked you code it works fine. you can check that here :- https://codesandbox.io/s/dark-tree-n43yiv?file=/index.html:0-735

CodePudding user response：

Try CTRL F5 to clear the browser cache