Anyone experiencing weird scroll snap behaviour in chrome/firefox for Desktop?

The documentation regarding scroll snap states that is intended as scrolling direction also: pressing an arrow key on the keyboard or equivalent operation on the scrollbar.

Now when doing that on Desktop I am experiencing a weird behaviour in Firefox and Chrome. Example code below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Snap-slider</title>
        <style>
            *{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: white; padding: 0; line-height: 1.5;}
            html{background-color: rgb(39, 39, 39); width: 100%; font-size: 1vh;}
            /* body{margin: 0;} */
            main{display: block; width: 100%; height: auto;}
            main>section{margin-top: 15rem; width: 100%;}
            h1{font-size: 4rem; color: white; font-weight: 500; text-transform: uppercase; text-align: center; letter-spacing: .15rem; padding: 5rem 0; margin: 0 auto;}
            .twosides{width: 90%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; padding: 4rem 0; padding-top: 1rem; text-align: center; margin: 0 auto;}
            .twosides>*{flex: 1; margin: 4rem;}

            div#parent{
                display: block; max-height: 540px; width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth;
                }
                #parent>div{display: inline-block; width: 100%; scroll-snap-align: center; margin: 0; padding: 0;}
                    img{display: inline-block; /* width: 100%;  */object-fit: contain; object-position: center; vertical-align: middle; margin: 0; padding: 0; font-size: 0; font-family: none;}

            div.tech-description{text-align: left;}
                div.tech-description *{font-size: 2rem; margin: 0; padding: 0;}
                div.tech-description>h4{font-size: 3rem; margin: 0;}
                div.tech-description>ul{padding: 2rem 0; margin-left: 1rem}
                    div.tech-description li{line-height: 2; text-align: left; margin: 0; list-style: none;}
                        li>span.tech-label{display: inline-block; font-weight: 900; width: 25%; text-transform: uppercase; margin-right: 1rem;}
                div.tech-description>p{margin-left: 1rem}
        </style>
    </head>
    <body>
        <main>
            <section>
                <h1>Snap Slider</h1>
                <div class="twosides">
                    <div id="parent">
                        <div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png" alt="red apple fruit">
                        </div>
                        <div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png" alt="red apple fruit">
                        </div>
                        <div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png" alt="red apple fruit">
                        </div>
                        <div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png" alt="red apple fruit">
                        </div>
                        <div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png" alt="red apple fruit">
                        </div>
                    </div>
                    <div class="tech-description">
                        <h4>Fuji</h4>
                        <ul>
                            <li><span class="tech-label">Where</span>City, Country</li>
                            <li><span class="tech-label">When</span>21/03/2021</li>
                            <li><span class="tech-label">What</span>Red apple fruit - Fuji variety</li>
                        </ul>
                        <p>This is a paragraph explaining something about the images on the left</p>
                    </div>
                </div>
            </section>
        </main>
    </body>
</html>

The issues I found:

1. in Chrome scroll-snap doesn't work when clicking on the scrollbar arrows, instead the element bounces back back to its initial snap-point and it gets stuck.
2. In Firefox scroll-snap works when clicking on the scrollbar arrows, but it doesn't transition smoothly.
3. In Chrome scroll-snap works using keyboard arrow keys only if the property margin:0 is not applied to the body.
4. In Firefox scroll-snap works using keyboard arrow keys, the transition is smooth, but sometimes is kind of laggy or doesn't work at all.
5. Both in Chrome and Firefox scroll-snap works as supposed if the scrolling is done with the combo "shift + mousewheel" (in this case because the scrolling is horizontal, if it was vertical "shift" was not necessary). Chrome is still kind of laggy with this method, but at least it doesn't conflict with body{margin:0} and the lag experienced is bearable.

This is restricted to Desktop, I haven't tried on touch devices yet.