1198902 - can't scroll all the way down on Amazon's customer support chat

Status: RESOLVED DUPLICATE of bug 748518

(Core :: Layout, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

Attachment: Demo: amz-chat.html (in a narrow window, 320px wide, it should be possible to scroll all the way down to read the "Thank you for contacting Amazon" text)

When chatting with an Amazon customer support representative, the last message is always unreadable because it gets obscured behind the textarea one is typing messages into. I don't understand why because it seems they have set sufficient padding on the container of the chat messages to make sure you can scroll down. See attached demo.

First reported on https://webcompat.com/issues/803

Comment 1

[Hallvord R. M. Steen [:hallvors]]

Interestingly, I was comparing to Safari when minimising that demo - but IE11, OperaPresto and Firefox all *agree* on the rendering..?!? So there's something about the CSS I'm missing and it's likely Amazon's fault.. Or? A bit weird if something as professional as AMZN ships code that's not tested against IE.. Although they are using some browser sniffing because there was a "non-webkit" string in one of the CSS files' URL.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase showing padding-bottom / padding-right being ignored in scrollable area

Here's the relevant style on the scrollable element (copypasted from devtools):
===



element {
    overflow-y: auto;
}
.chat-roller {
    padding-top: 55px;
    height: 100%;
    padding-bottom: 75px;
}
===

Basically:
 - The scrollable region ("chat-roller") is as tall as the full page-height -- it has "height: 100%"
 - The header & footer are absolutely positioned, and they necessarily cover up the top & bottom of the scrollable area.
 - The page tries to work around this by adding padding at the top and the bottom of the scrollable area (and the author is hoping that the padding is what will be covered up by the header/footer, at the scrolled-all-the-way extremes).
 - BUT, IIRC, padding-bottom isn't necessarily part of an element's scrollable area. So the padding-bottom actually has no effect.

Here's a simple testcase demonstrating this.

There's a bug filed on this already, though I can't find it right away.

Comment 3

[Daniel Holbert [:dholbert]]

bug 748518 is the bug I was thinking of. This is a dupe of that, though you may want to make this a tech evang bug instead, so I'll hold off on duping.

One way to write this correctly (and not run into bug 748518) is to just reduce the height of the .chat_roller scrollable element -- e.g. give it "height: calc(100% - 75px)" instead of "height: 100%; padding-bottom: 75px"

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Thanks for the analysis (although I don't understand why the CSS spec says padding is not part of an element's scrollable area.. I'll ponder that some other time..)

Let's do the outreach in the webcompat.com issue. Closing this as a dup.

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Hallvord R. M. Steen [:hallvors] from comment #4)
> Thanks for the analysis (although I don't understand why the CSS spec says
> padding is not part of an element's scrollable area.. I'll ponder that some
> other time..)

IIRC, the way I rationalized it to myself is as follows:
 - scrollbars (and the tracking of scrollable-area in general) is a way of letting you reach pieces of an element's content that don't fit inside of it.
 - padding is not part of the element's content. So, it's not really useful to make it part of the scrollable area.

Or something like that.

Note also that WebKit/Blink behave the same way as everyone else does with "padding-right" -- they don't make it reachable via scrollbars. (as shown by my attached testcase)  They only do their own thing for "padding-bottom" (different from what they do for "padding-right").