The problem

The mobile project has been developed using VUX. I used the Search component to do some secondary packaging before. Recently, I found that the default slot inside the Search component was fixed, which was fine to open on the mobile phone, but failed to open in the browser simulator.

Reasons for screening

First of all, I found the main cause of fixed positioning failure on Google

The fixed property creates a new cascading context. When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.

See MDN position: fixed

Ok, the main problem has been found. Now let’s see if this is the cause

In the Search component of VUX, we found the outer container. In the vUX-search-fixed style, there is a bath-filter property

.vux-search-fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(5px);
}
Copy the code

OK, we tried to deselect the backdrop filter and fixed position covered the entire window again.

Let’s look at the compatibility of the bahy-filter property

Compatibility is not very good and currently requires chrome76 or above to work.

The fixed position was displayed normally before, because the browser did not support the predicate-filter attribute.

As a result, the parent element was positioned against the backdrop backdrop filter (viewport), but against the parent element with the backdrop backdrop filter (viewport).

Repetition address

Codepen. IO/eJayYoung/p…

Repetition steps

  1. Open the Codepen link on the latest version of Chrome (currently mine is 80.0.3987.149 (official) (64-bit))
  2. Because the latest version of Chrome supports it by defaultbackdrop-filterProperty, so you can see insidefixedThe child element of the locationchildWill be relative to the Settingsbackdrop-filterProperty of the parent elementparentLocation, not viewPort
  3. theparentElements of thebackdrop-filterProperty annotation, you can seechildElements are positioned based on viewport, covering the entire viewport
  4. Open this link in the latest Firefox, because it is not supportedbackdrop-filterProperty, sofixedDon’t fail

The solution

We just need to remove the context-filter attribute of the parent

After all, ensuring the consistency of the layout must be a higher priority than this pure filter beautification

I have submitted an issue to VUX

Refer to the link

  1. Developer.mozilla.org/zh-CN/docs/…
  2. Caniuse.com/#search=bac…