Bug 31431 – REGRESSION: Cannot scroll to see footer on camendesign.com

• Component: WebCore Misc.
• Status: NEW

[Glenn Wilson]

Created attachment 43095 [details]
reduction

camendesign.com shows a footer under each article (that's the e-mail and
search box, not the category links--that's the header), this footer is
visible in Firefox 3.5, Safari, Opera and Chrome 3.x

However, it does not appear in Chrome 4.x or Webkit ToT, it's hidden by a change in
calculation somewhere. Search the CSS for fixed-footer, and you'll see that
box-sizing is used to exclude the footer from the 100% height via padding
on the HTML element.

[Kroc Camen]

From my comment at chrome bugs: Guys, this regression wasn’t fixed for Chrome 5 and it’s now made its way into Safari 5. Needless to say, I’m miffed. You broke my site, and now I may have to wait for Safari 6 before/if it gets solved. I’ll look into modifying the CSS to find a solution. It was hard enough getting this to work on Firefox, Opera and WebKit. If I find a workaround I’ll get back to you, thanks.

[Alexey Proskuryakov]

It does seem that this bug report fell through the cracks, and I'm sorry about that.

However, I don't see the problem on http://camendesign.com - have you already found a way to work around it? But the reduction still shows a regression, of course.

[Alexey Proskuryakov]

<rdar://problem/8071969>

[Alexey Proskuryakov]

The regression I see on reduction is that scrolling doesn't work.

[Kroc Camen]

View in Firefox to see the difference on a lengthy page like http://camendesign.com/video_for_everybody at the bottom; in Safari 5 the search box cannot be seen—it’s under the header (that’s fixed to the bottom of the screen). This change was introduced at somepoint during Chrome 5 development (bug is here http://code.google.com/p/chromium/issues/detail?id=27516 ). The trick I’m using is to use box-sizing to create a fixed-footer. When developers get to IE8+ minimum support then this will be a really elegant and simple solution.

[Alexey Proskuryakov]

I can reproduce this problem with the new URL.

[Kroc Camen]

I have worked around the issue by using alternative CSS. It may have been caused by the use of position:relative to move the footer up, I removed that and set a larger height along with other changes. The cited URLs will no longer display the fault.

Tested in:
* Chrome 5.0.375.55
* Chrome 6.0.408.1
* Chromium 6.0.415.0 (48034)
* Safari 5
* Safari 4
* WebKit r61783

Thanks all

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and not able to scroll to view "PASS".

While in case of Firefox Nightly 105, I am able to scroll and see "PASS" on left side (it says that it should be on 'RIGHT'). Further, in Chrome Canary 106 - I am able to scroll but it bounced back unlike Firefox but it scroll at least to make me see "PASS" and it is on right side right above line "Scroll down, you should see PASS to the right" (where there is text "PASS").

Just wanted to update latest testing results and not clear on web-spec, so I would leave to someone else pitch in here about those. Thanks!