Menu
I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.
To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.
The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:
#element {
-webkit-transform: translateZ(0);
}
498
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.
The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.
Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings
body, html { margin: 0; padding: 0 };
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
