background

When doing such an active page, I found that the button element with fixed position at the bottom could not be displayed in Baidu browser.

Google later found the little friend’s article aimed at the front end of the Baidu browser’s total fixed positioning problem

It says:

This is baidu browser advertising shielding mechanism, will let this fixed positioning at the bottom of the element as advertising to shield (hidden remove not displayed)

And offered his solution:

The bottom should not be 100% width, and should not be a picture; You can also achieve the same effect with position: Absolute (height not super screen) or use JS to achieve the layout effect (few scenes)

So far, all the methods we have seen on the web are based on the width element, which is not very useful (more on the other methods in the end).

This sharing provides a new idea: false element method!

False element Method (recommended!!)

html

Source code structure

<div class="bottom_wrap">
    <div class="btn" @click="handleBtn">A: I'm a landlord. I'd like to apply for an apartment</div>
</div>
Copy the code

New code structure

<div class="btn_fixed" @click="handleBtn"></div>
Copy the code

Train of thought

Btn_fixed is an empty div that is added to the page as a pseudo-element after the button is cut. This will be perfect to avoid the baidu browser advertising mechanism of the shield ~

The new style is

 .btn_fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}
.btn_fixed::after {
    content: '. ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 21vw;
    background-size: cover;
    background-image: url('./images/btn_fixed.png')}Copy the code

Some other options

I also saw some other schemes on the Internet, but I feel they are not very useful.

Change width method (ugly)

One idea is to set the width of a fixed positioning image to 99%

(Article address: mobile Baidu APP H5 webpage Position: Fixed attribute invalid. DIV structure is automatically hidden),

Width :100%; After repeated attempts. As long as the image is not 100% width, mobile Baidu will not block it as an advertisement. So just change the width of img to 99%. Or don’t use the whole big image

But after the test, found that now the width of the picture even if it is 90% will still be blocked, guess baidu browser advertising mechanism has done the upgrade, expand the scope of filtering.

However, width is too small and obviously too ugly to pass the UI level

Improvements: Width set percentage, transfrom zoom (failed)

The idea was to set the width to 80% and scale it by transfrom: Scale (1.25, 1.25)

Well, it was blocked by Baidu again… Failure.

subsequent

Brainwave, thought of the use of false elements to solve, so there is the above [false elements method] ~ exclusive original, pro test good, I hope to help you ~