I fixed it!
It caused by hiding address bar when you scrolling in the Firefox mobile app.
I resolve it by preventing hiding address bar with adding some styles to the parent element or a wrapper in the body (You can disable this option in the customize section of Firefox browser to test).
.wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
1418866 - In Firefox position:fixed does not work inside elements with a CSS filter
The author said: (This is a simplified example of a bug that occurred behind a site with a pay-wall) See the example http://jsbin.com/sulipegela/1/edit?html,css,js,output <!DOCTYPE html> <html> <head> </head> <body> In Firefox fixed elements inside an element with a filter don't remain fixed. In Chrome and Safari the purple rect stays in place when scolling. <main> <span class="fixed"></span> </main> </body> </html> main { height: 200vh; filter: blur(10px); } .fixed { background-color: rebeccapurple; height: 200px; width: 350px; position: fixed; top: 100px; left: 0; } verified that it is working in Safari/Chrome with or without filter.
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
1000423 - position: fixed elements are misplaced
I think this is basically bug 988882 except here we have resolution != 1 and the calculation of the viewbounds is not correct for resolution different from 1. There is also an existing problem here: if you load the simplified testcase (before bug 935219 landed) the fixed pos element will be correctly at the very bottom of the screen. However if you zoom it will be a little bit up from the bottom. I think this is due to some interaction of how we handle the disappearing toolbar in conjunction with fixed position elements on a page that fits completely on the screen (so that is is not scrollable).
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
1258911 - Position fixed not working until reapplied in css inspector
Issues with web page layout probably go here, while Firefox user interface issues belong in the Firefox product. (More info) ... Issues with relative, absolute, fixed, and sticky positioning. ... This bug is publicly visible. ... User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 Steps to reproduce: Please watch this video to see the map under the dialog not observing position fixed until after it is reapplied using the css inspector.
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
1760924 - "position: fixed;bottom:0" not working on mobile when site content is a bit longer than mobile height
Summary: position: bottom not working on mobile when site content is a bit longer than mobile height → "position: fixed;bottom:0" not working on mobile when site content is a bit longer than mobile height
GitHub
github.com › storybookjs › storybook › issues › 16774
Firefox zoom implementation breaks position: fixed elements in Docs · Issue #16774 · storybookjs/storybook
November 24, 2021 - Describe the bug In Firefox, the zoom feature uses transform styles (see #12845) - unfortunately this breaks positioning on elements that require position: fixed when in the "Docs" view. Normally a position: fixed element's position woul...
Author idesigncode
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
879443 - CSS Fixed positioning impossible when using transform property
It replaces the content of the "#content" div by some other containing another fixed positioned div, but appears to be "absolutely" positioned. I figured out the source of the issue : the transform property. We can safely remove the opacity and transition properties but as soon as transform is used, I can't use fixed anymore. You can try to remove it to see it by yourself. I also notice this bug occurs in Chrome as well, so I hope it's not some weird and/or hidden part of the documentation.
Top answer 1 of 2
2
UPDATE: Bug fixed! Turns out the broswers were getting confused with the media query switch from bottom:0 position on larger displays to suddenly having to honor top: 0 AND bottom:0 on mobile in smaller screen widths. I fixed it with the following code. I took a mobile first approach to this which worked wonderfully
```css
.nav {
width: 100%;
z-index: 100;
position: fixed;
top: inherit; //this non numerical offset value positions the nav bar up top by default;
@media (min-width: 1100px) {
bottom: 0; // then this rule comes in at larger widths and overrides whatever the nav inheriting
}
}
```
2 of 2
0
Glad you were able to solve this, @Jose Morales-Mendizabal (https://teamtreehouse.com/josemorales). Nice work!
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
607417 - Reconcile position:fixed with async scrolling and displayport+meta-viewport
Issues with web page layout probably go here, while Firefox user interface issues belong in the Firefox product. (More info) ... Issues in Layout that do not fit into any other Layout component or which span multiple Layout components. Bugs related to the top level presentation objects (pres shell, pres context, and document viewer), the frame constructor, and the base frame classes, as well as general issues with alignment and sizing, all belong here. ... This bug is publicly visible. ... We should decide how position:fixed should be interpreted and then implement it.
Top answer 1 of 5
8
Check your body css tags, the metas, and anything that could affect to that div. Maybe there is another css rule overwriting that 'position'
Also, if you have css3 tags or errors in the body css, for example, transform: translate3d(0px, 0px, 0px); that could make fixed position break in Firefox.
2 of 5
1
filter on the current element or any parent will cause position fixed break on Firefox. Remove it or find another way to not to use filter directly
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
268111 - [FIX]position: fixed elements are positioned relative to the page rather than the viewport
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041106 Firefox/1.0 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041106 Firefox/1.0 When loading a page with a position: fixed element on it (see the URL), the element is positioned against the page itself, rather than the viewport - even though it is anchored to the viewport when you scroll. Reproducible: Always Steps to Reproduce: 1. Load the URL. 2. Scroll down. 3. Reload (not shift-reload, as that resets the scorll-position).
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
78087 - Doesn't display position:(absolute, relative, fixed) with negative z-index
Sorry, but you will have to wait for Firefox 3.0 for this fix. *** Bug 355445 has been marked as a duplicate of this bug. *** *** Bug 360388 has been marked as a duplicate of this bug. *** Hi, I was hit by this bug in FF 2.0.0.12 Mac PPC, found my way here, read the above thread, understood most but not all of it (in my defence, the W3C pages about stacking order have to be one of the most obscure explanations in existence; clearly many people differ about what they 'really mean'), and then: --> I tried the quick fix: set <body> to {position: relative; z-index: 0}. And Lo!
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
656036 - [meta] Attach position:fixed elements to the layout viewport (a.k.a. "fixed viewport"), not the visual viewport
Summary: position:fixed elements do not remain fixed to the CSS viewport when zooming with APZC → Attach position:fixed elements to the layout viewport (a.k.a. "fixed viewport"), not the visual viewport ... Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.) ... Marking this as a meta bug, since I expect all the patches to land in dependent bugs. ... The behavior difference here in between chrome and firefox is happening when the page is zoomed in.
Top answer 1 of 10
26
I had the exact same problem, turns out the following CSS property of a parent element was causing the problem.
transform: translate3d(0px, 0px, 0px);
2 of 10
22
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
10209 - problems with absolute or fixed position on table [ABS POS] [FIX POS]
I mean, the code before this tested for the fixed container list being empty, but now instead of the container list being empty, it may not exist at all. ... (In reply to comment #53) > Not if the element in question has its style changed dynamically, for example > by setting elem.style.position.
Stack Overflow
stackoverflow.com › questions › 77685784 › position-fixed-in-firefox-browser-ui-css
html - position: fixed in Firefox browser UI CSS - Stack Overflow
This doesn't happen. Instead, fixed seems to be ignored entirely. By default the menubar display: -moz-box; via a * selector. Thus I tried changing it to flex, which I know works because the ordering of the elements changes, but position: fixed still has no effect.
Stack Overflow
stackoverflow.com › questions › 31557179 › mozilla-firefox-position-fixed-bug
html - Mozilla Firefox, position fixed bug - Stack Overflow
In all browser are shown proper, but in Mozilla Firefox all are on top of each other, because it shows position fixed like position absolute. ... Check differences between chrome and firefox... !IMPORTANT(1.Expand a result window little bit, 2.scroll down, 3.click anywhere in table!!!!!) Answer from Semantic UI creators: noUse Problem exist in Internet Explorer and Mozilla Firefox, did not exist in Chrome and Opera....
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
170011 - Adding overflow: style to <body> with position:fixed causes some <div>s to disappear
The override css code is shown below, and I've narrowed the problem down to one line: body { position: fixed; bottom: 0px; overflow: auto; } Removing the overflow: property or setting it to inherit restores the missing content, with the unfortunate side-effect of making the content unscrollable (and thus all but the first screen invisible).
Stack Overflow
stackoverflow.com › questions › 16385406 › something-strange-with-firefox-and-fixed-position-via-js
Something strange with Firefox and fixed position via JS
As you can see, the vertical offset is calculated based on how much page has been scrolled down; the horizontal position is calculated based on the position of the navigation bar, which is also set by jQuery in another part of the script (in order to make it always fixed to the side of the page content - which has fixed width - instead of fixed to the browser window). When I run this in Chrome/Safari/Opera everything works fine and the dot is always in the right position. In Firefox though, the dot is where it should be only when I first load the page.
Stack Overflow
stackoverflow.com › questions › 39096795 › css-position-fixed-not-working-in-chrome-working-on-firefox
html - css position fixed not working in chrome working on firefox - Stack Overflow
August 23, 2016 - Please try using z-index or top position for the hidden information.