1

The following iScroll demo works in Safari and Chrome, but not in Firefox (I'm using 9.0.1)

http://cubiq.org/dropbox/iscroll4/examples/ipad/

I've tried everything I can think of to try and solve this problem and I've looked at other questions on this same issue, such as this question. Nothing has worked so far. DIV with "position:absolute;bottom:0" doesn't stick to the bottom of the container in Firefox

Here are a few observations I've made:

  • Adding something like bottom:-300px to nav and article makes the background show. I can't fire out why.
  • Adding height:100% to nav and article makes the background show at the same height as the sibling header.
  • The problem is independent of iScroll. You can comment out iScroll instantiation from the javascript and the html/css alone don't work in Firefox, but work in Safari and Chrome.

Anyone have any ideas?

Here's a jsFiddle to save people the time: http://jsfiddle.net/aQf7Y/

Zoe
  • 27,060
  • 21
  • 118
  • 148
Andrew De Andrade
  • 3,606
  • 5
  • 32
  • 37

2 Answers2

4

You're trying to use absolute positioning inside a XUL box. Absolute positioning is not supported in XUL, so the position style is simply ignored.

I suggest not using display: -moz-box, or for that matter display: -webkit-box or display: box, and certainly not if you expect them to behave the same. The first of these is a XUL box, the second of these is a very early CSS3 flexbox draft (which is totally different from a XUL box), and the third of these doesn't exist and never will: CSS3 flexbox is using display: flexbox, which behaves quite differently from both -moz-box and -webkit-box.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Awesome. Didn't know two much about these new specifications. Is it best to forego all these CSS3 features entirely or are there one or two rules there you'd keep? – Andrew De Andrade Feb 17 '12 at 18:04
0

It seems like a bug to me. For some reason the nav and article, though set to bottom: 0; are computing to bottom: 298px; which is actually setting it to the bottom of the header element, rather than aligning with the bottom of the relative positioned container.

I have no idea why. Again, as best I can tell it is a bug.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Go ahead and comment out the Javascript and you'll see that it still doesn't behave the same in Firefox as in Chrome and Safari. It's not a javascript issue at all, I just left the Javascript in their to preserve the fidelity of the original use case, in case someone can offer an alternative solution for what is trying to be accomplished. I hope it isn't a bug, but I believe you may be right. – Andrew De Andrade Feb 17 '12 at 05:17
  • Actually, I don't know why I mentioned the script. I had already noted that it was not javascript by turning it off. I think I was tired (it was past midnight my time when I answered). I am going to remove the javascript comment in my answer. – ScottS Feb 17 '12 at 13:05