Mask-image multi-layer loading sampler

#473987435 Backdrop-filter + mask-image loading sampler

How to use

Repro flow

1) Open this page in a fresh tab. 2) Click Run scenario. 3) Watch both rectangles during the first ~5 seconds.

Expected with the fix: the right rectangle (with backdrop-filter) stays fully yellow until the slow mask loads, then appears. The left control is only informational.

Live sampler

No backdrop-filter (control)

Control only: should stay persistent as light blue over yellow. Do not use this box as pass/fail signal.

With backdrop-filter (bug/fix target)

Should stay fully yellow while one mask layer is still loading, then appear only after the slow URL mask settles.

Event log




CSS used


.target {
  width: 120px;
  height: 60px;
  background: rgba(255,255,255,0.5);
}

.with-backdrop {
  backdrop-filter: invert(1);
}

/* Applied on run */
mask-image: linear-gradient(black, black), url(SLOW_URL);