Last Comment Bug 1198902 - can't scroll all the way down on Amazon's customer support chat
: can't scroll all the way down on Amazon's customer support chat
Status: RESOLVED DUPLICATE of bug 748518
:
Product: Core
Classification: Components
Component: Layout (show other bugs)
: unspecified
: Unspecified Unspecified
-- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
https://www.amazon.co.uk/gp/aw/contac...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2015-08-26 12:13 PDT by Hallvord R. M. Steen [:hallvors]
Modified: 2015-08-26 15:47 PDT (History)
1 user (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
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) (25.53 KB, text/html)
2015-08-26 12:13 PDT, Hallvord R. M. Steen [:hallvors]
no flags Details
reduced testcase showing padding-bottom / padding-right being ignored in scrollable area (325 bytes, text/html)
2015-08-26 12:57 PDT, Daniel Holbert [:dholbert]
no flags Details

Description User image Hallvord R. M. Steen [:hallvors] 2015-08-26 12:13:25 PDT
Created attachment 8653006 [details]
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 User image Hallvord R. M. Steen [:hallvors] 2015-08-26 12:21:16 PDT
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 User image Daniel Holbert [:dholbert] 2015-08-26 12:57:22 PDT
Created attachment 8653030 [details]
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 User image Daniel Holbert [:dholbert] 2015-08-26 13:03:37 PDT
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 User image Hallvord R. M. Steen [:hallvors] 2015-08-26 15:38:52 PDT
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.

*** This bug has been marked as a duplicate of bug 748518 ***
Comment 5 User image Daniel Holbert [:dholbert] 2015-08-26 15:47:11 PDT
(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").

Note You need to log in before you can comment on or make changes to this bug.