All geek questions in one place

Position: fixed error when switching to Chrome Mobile

If you browse my site in Chrome Mobile on a mobile phone and scroll in any direction, the footer will not stay in place. Any idea for a reason or a fix?

The footer CSS code is as follows:

#footer{ width:100%; height:auto; filter:...; margin:0; padding:0; position:fixed; bottom:0; z-index:3000; }

The initially shown footer part will be # pull2 with the following CSS properties:

 #pull2 { width: 100%; display: block; position:static; float:none; padding-left:10px; z-index:0; background: ...; background-position:...; cursor:pointer; } #pull2 p{ line-height: 40px; margin:0; }
+6
source share
3 answers

Try to add;

 -webkit-backface-visibility: hidden;

with position: fixed .

Ref:

Simple CSS fix for fixed positioning
Fixed position does not work in mobile browser

Alternatively you can achieve this with jQuery

Working script

 $(document).ready(function () { var winHeight = $(window).height(); $(window).scroll(function () { $("#footer").css("top", $(window).scrollTop() + (winHeight-30) + "px"); }); });
+11
source

In addition to the -webkit-backface-visibility: hidden trick, having an element larger than the page also causes position: fixed problems (according to this question ). It is also possible to add <meta name="viewport" content="user-scalable=no"> to the <head> .

+5
source

Testing in Safari on iOS 7.1.1 and Chrome (Mobile) on iOS 7.1.1, version 36.0.1985.49, your footer works fine and stays where it is, despite scrolling in any direction.

I know that some browsers do not support the position:fixed attribute (for example, some older versions of IE), but it seems to work fine for me on Chrome / Safari mobile devices.

It would be helpful if you added things like the mobile device (s) you tested for, the version of Chrome you tried, and the OS version.

Also, I think your title needs to change from "position: absolute bug ..." to "position: fixed bug ...";)

+2
source

Source: https://habr.com/ru/post/973024/

More articles:


All Articles