なぜCSS `- WebKit Mask Box Image `はオーバーフロー後には適用されません.

私は、次のようにカードに線形ぼかしを成し遂げようとしています

線形ぼかしは、次のCSSプロパティで適用されます

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

overflow:hidden; -webkit-mask-box-imageプロパティが適用されていない後、この奇妙な行動の任意の理由?

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow:hidden;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

ぼかしは、以下に示すようにマスキングしていません

ここでソースコードを見つけることができます