CSS flex-direction implementation not behaving as expected?

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
BenFenner
Astronaut
Astronaut
Posts: 706
Joined: 2015-06-01, 12:52
Location: US Southeast

CSS flex-direction implementation not behaving as expected?

Unread post by BenFenner » 2025-02-04, 01:09

I'm seeing unexpected behavior with these two CSS attributes combined:
display: flex;
flex-direction: column-reverse;

And by unexpected, by that I just mean presumably most other modern browsers implement those attributes slightly differently than Pale Moon. It is entirely possible Pale Moon is the only one that has it correct to spec, in which case I'll move on and not "abuse" those CSS attributes...

Minimal steps to reproduce:
1) Create a new directory named however you wish, perhaps "chat".
2) Create three empty files in that directory called "index.html", "chat.css", and "chat.js".
3) Copy the contents of the three code blocks below into their respective files.

index.html

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="chat.css" media="screen" title="screen" />
  </head>
  <body>
    <br>
    <hr>
    <br>
    <div class="chat">
        <div class="chat-content">
            <div class="msg sent">Message 1</div>
            <div class="msg rcvd">Message 2</div>
            <div class="msg sent">Message 3</div>
            <div class="msg sent">Message 4</div>
            <div class="msg sent">Message 5</div>
            <div class="msg rcvd">Message 6</div>
            <div class="msg rcvd">Message 7</div>
        </div>
    </div>

    <br/><br/>
    <div class="btn">
        <button id="addItems">Add new message</button>
    </div>

    <br>
    <hr>
    <br>
    <script src="chat.js"></script>
  </body>
</html>
chat.css

Code: Select all

/* QuickReset */
* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
}

/* Button */
.btn {
    display: flex;
    justify-content: center;
}
.btn button {
    background: #42a5f5;
    color: #fff;
    border: none;
    padding: 7px 15px;
    border-radius: var(--rad-sm);
    outline: none;
}

/* Chat */
.chat {
    overflow: auto;
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    
    /* ?enter the container */
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid #f1f1f1;
}

.chat-content {
    padding: 20px;
    max-width: 500px;
    margin: auto;
    width: 100%;
}

.msg {
    position: relative;
    max-width: 75%;
    padding: 7px 15px;
    margin-bottom: 5px;
}

.msg.sent {
    border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
    background: #42a5f5;
    color: #fff;
    /* moves it to the right */
    margin-left: auto;
}

.msg.rcvd {
    border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
    background: #f1f1f1;
    color: #555;
    /* moves it to the left */
    margin-right: auto;
}

/* Improve radius for messages group */
.msg.sent:first-child,
.msg.rcvd + .msg.sent {
    border-top-right-radius: var(--rad);
}

.msg.rcvd:first-child,
.msg.sent + .msg.rcvd {
    border-top-left-radius: var(--rad);
}
chat.js

Code: Select all

let chatContent = document.querySelector('.chat-content');

document.getElementById('addItems').addEventListener('click', function() {
    let newMsg = document.createElement('div');
    newMsg.classList.add('msg', (chatContent.children.length % 2) ? 'sent' : 'rcvd');
    newMsg.innerHTML = "Message " + (chatContent.children.length + 1)
    chatContent.appendChild(newMsg);
});
4) Open the "index.html" file in Pale Moon. Notice the lack of a vertical scroll bar on the right side of the main chat window div.
5) Open the "index.html" file in another modern browser. Notice a vertical scroll bar displayed on the right side of the main chat window div.

Screenshots:

Pale Moon:
Image

Waterfox (3-4 versions behind latest because that's what I have on this machine):
Image


Context:

I'm trying to implement a simple chat room feature from scratch using PHP/MySQL/HTML/CSS and a sprinkling of vanilla JS. When looking into having the chat window automatically scroll down when a new message is received, I found the normal JS solutions, but then fell in love with a CSS-only solution described here:
https://maksymkotov.com/blog/how-to-aut ... ages-added

It doesn't suffer from the same issue most JS solutions do, and it's just very clean and simple. I'd love to implement it if possible. If not, I can fall back to the typical JS solution(s).

I've searched the forum and there was a little bit of mention of these CSS properties but nothing related that I could find. Also, if the minimal code above to reproduce is confusing or too "busy" I can try to trim it down a good bit more to make it clearer what's going on. Just let me know.
Last edited by BenFenner on 2025-02-04, 02:24, edited 1 time in total.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 36973
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: CSS flex-direction implementation not behaving as expected?

Unread post by Moonchild » 2025-02-04, 02:00

You call it "clean and simple", I call it "minimalist and quirky" ;)
This method will work if you add a wrapper for the content inside the scroll element.

The trick is to change the direction of the content using the column-reverse value in the scroller. Because the elements are in a different container, they are not “flipped” but instead are lined up at the bottom. This causes the scroller to scroll down when adding content.
It is basically relying very heavily on implied behaviour. i.e. it's not something explicitly defined in the spec, AFAIK, and very much renderer-dependent. Compare it to Chrome abusing padding to "force open" elements and giving it a specific height and then happily ignoring that padding shouldn't provide room for other content (it's padding, after all). Widely (ab)used but also renderer-specific.
"The world will not be destroyed by those who do evil, but by those who watch them without doing anything." - Albert Einstein
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 36973
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: CSS flex-direction implementation not behaving as expected?

Unread post by Moonchild » 2025-02-04, 02:08

Of note, the codepen does work for automatically scrolling down when adding a new message, but the difference seems to be that the flex isn't necessarily causing a scrollable window when resizing. If you can find the fix window with mozregression or what not I may be able to align that behaviour to what others do (as it does seem to be more logical to recalculate whether it should be scrollable or not)
"The world will not be destroyed by those who do evil, but by those who watch them without doing anything." - Albert Einstein
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

BenFenner
Astronaut
Astronaut
Posts: 706
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: CSS flex-direction implementation not behaving as expected?

Unread post by BenFenner » 2025-02-04, 02:13

Hmmm, I thought something like that might be the case.

I guess I will implement a JS solution or maybe take a stab and something else "creative".

Cheers!

Edit: I replied as you posted your second reply.

I may see what I can find regarding a mozregression.

(If I can figure out how to do my first one of those...

Ohhh, just check against older versions of Firefox and binary search through versions until the behavior change presents itself? Easy peasy.)

BenFenner
Astronaut
Astronaut
Posts: 706
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: CSS flex-direction implementation not behaving as expected?

Unread post by BenFenner » 2025-02-04, 03:01

I've done a little work finding the mozregression. I will continue narrowing it down tomorrow, maybe to a specific version bump, hopefully to a specific commit if I can.


Notes to self:
Firefox Portable Version 102 (ESR) → Scroll bar present.
Firefox Portable Version 91 (ESR) → Scroll bar present.
Firefox Local Version 81 → Scroll bar present.
Firefox Local Version 80.0b8 → Scroll bar not present. Seemingly same behavior as current Pale Moon.
Firefox Portable Version 78 (ESR) → Scroll bar not present. Seemingly same behavior as current Pale Moon.

Looks like it might be version 81 with the fix. I need to confirm.
https://bugzilla.mozilla.org/show_bug.cgi?id=1042151

Reading more of that bug report, it does seem to point more toward this being an actual bug, not just an interpretation of implied implementation details since all else being equal using flex-direction: column; does show a scroll bar, and then flex-direction: column-reverse; does not.

I've confirmed version 81 is the newest version with the fix and edited the list above. The linked bugzilla ID seems to be the correct reference.

BenFenner
Astronaut
Astronaut
Posts: 706
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: CSS flex-direction implementation not behaving as expected?

Unread post by BenFenner » 2025-02-04, 03:41

Moonchild wrote:
2025-02-04, 02:08
If you can find the fix window with mozregression or what not
See Notes to self: in the post above. Let me know if that's enough info for you.
(It does look like a pretty involved fix... :( )

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 36973
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: CSS flex-direction implementation not behaving as expected?

Unread post by Moonchild » 2025-02-04, 08:54

It does seem to be the issue here.

And it displays the typical situation in plain text that happens so often:
  1. Spec is established
  2. Chrome acts differently
  3. Websites want to use Chrome quirk
  4. Mozilla investigates
  5. Mozilla chooses to become like Chrome for parity reasons instead of telling webmasters to adhere to the spec
  6. Some time passes
  7. Spec is adjusted to describe what both browsers actually do
  8. We're now no longer spec compliant
See https://bugzilla.mozilla.org/show_bug.cgi?id=1042151#c2

That aside though, the fix does seem more involved than it strictly has to be because of some rounds of refactoring in it. I was thinking this would be a lot simpler to fix...
"The world will not be destroyed by those who do evil, but by those who watch them without doing anything." - Albert Einstein
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

BenFenner
Astronaut
Astronaut
Posts: 706
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: CSS flex-direction implementation not behaving as expected?

Unread post by BenFenner » 2025-02-04, 14:28

Oh yes, the bizzaro world of that bug report discussion was not lost on me. I do see that Pale Moon (and Firefox pre-81) are to spec.

It is also quite odd in CSS to wrap one div in another to cause this type of specific behavior when an unwrapped div can't be convinced to behave the same way. It does seem out of character for CSS.

That said, from the 1,000 km point of view (that ignores the nuance of a spec that allows for the display and scroll reversal of a div but without changing the overflow detection direction) of a web developer it does seem odd to get a scroll bar in one case, and not the other (all else being equal using flex-direction: column; gives a scroll bar but flex-direction: column-reverse; does not). And thinking about it from that point of view, it seems like an oversight in the spec. Like the spec should probably have mentioned reversal of the overflow detection direction, but just doesn't because of an oversight. And then Chromium just happen to take what seemed like the logical next step. Maybe "a broken clock is right once/twice a day" type of situation there...

Continuing on this journey, if you or another PM dev one day get the itch to tackle this admittedly large refactor job you won't get any push-back from me. ;)

As for me, I've come up with what I believe should be feature-parity JS to accomplish the same thing (something I was actually worried about being able to accomplish yesterday). So that's how I'll proceed from here.

Cheers!

Post Reply