We are migrating the forum to a new server April 18 (started approx. 10:10 CET). During some of this time, the forum will be in read-only mode, so that we make sure new contributions aren't lost in the migration. Hopefully this will only last a few hours.
No internet connection
  1. Home
  2. Ideas

Scroll to top /Website improvement on mobile iOS devices

By Chris Shaw @Chris_Shaw2021-04-08 18:41:09.366Z

This is a minor quibble but when browsing on most websites in iOS /Safari, tapping the very top of the Safari window scrolls the page to the top. For some reason this isn’t possible in the SoundFlow website. Can this be implemented?

Reply
  • 13 replies
  1. Christian Scheuer @chrscheuer2021-04-08 19:41:18.342Z

    Which part of the website do you notice this on? We're deploying the new website this coming weekend, so this may have already been addressed there.

    Reply
    1. Chris Shaw @Chris_Shaw2021-04-08 20:29:59.042Z

      The forum website.
      Sorry for the not being more clear.

      Reply1 Like
      1. Christian Scheuer @chrscheuer2021-04-08 22:41:39.981Z

        Thanks! @KajMagnus, is this something you already have logged somewhere as something to look at?
        I actually noticed something similar since we're updating our website (not the forum) to support mobile use more.
        I noticed that the forum doesn't appear to be responsive for mobile use (at least not all pages). But maybe some of this is due to our own custom css.

        Reply
        1. K@KajMagnus
            2021-04-10 19:02:25.370Z

            I've noticed something like this — I'm not sure if it's the exact same thing. As follows:

            When I open a Ty page, initially, Home, End, Pg Up, Pg Down doesn't do anything — until I've clicked somewhere inside the page; thereafter those buttons work.

            I'd guess (but don't know for sure) that with that fixed, iOS / Safari top-tap would start working as usual again. I can have a look.

            the forum doesn't appear to be responsive for mobile use (at least not all pages).

            Hmm it's supposed to be responsive, e.g. sidebars auto collapsing and the middle text column getting more narrow, with less padding / margins. I tried resizing this page (directly in Chrome, Dev Tools) looks ok to me also on mobile displays (in Dev Tools). If you post a link to a problematic page I could have a look?

            Reply1 Like
            1. Christian Scheuer @chrscheuer2021-04-10 20:46:42.970Z

              I think you're right most pages do work.

              This one doesn't look too great on mobile, could probably be improved so you can't scroll horizontally:
              SoundFlow Forum

              Reply
              1. Raphael Sepulveda @raphaelsepulveda2021-04-11 23:46:52.520Z

                @KajMagnus This is what @Chris_Shaw means:

                Reply3 Likes
                1. K@KajMagnus
                    2021-04-13 18:29:35.950Z

                    Thanks Raphael for the video (!), I didn't know how to do that.

                    I think I will have some time to look into this on Friday

                    @chrscheuer ok yes someone else has noticed too that one can scroll horizontally on ... hmm it was Ty's homepage in that case. Thanks for finding out which page has this extra scroll

                    Reply2 Likes
                    1. Christian Scheuer @chrscheuer2021-04-14 17:32:30.537Z

                      Yea, thanks Raphael for the video.

                      FWIW, I'm also seeing issues scrolling on the notifications popup on mobile. I don't know if maybe this is a case where the browser mobile simulations aren't accurate. At least in Chrome on mobile, I can't scroll down to see the rest of the notifications on my phone.

                      Reply2 Likes
        2. K
          In reply toChris_Shaw⬆:
          @KajMagnus
            2021-04-20 19:15:09.311Z

            Status update: @Chris_Shaw , @raphaelsepulveda , @chrscheuer

            1) I think the topbar-tap thing in iOS cannot easily be made to work. Instead, I can add a "real" button, to scroll to top (and which will work on Android too).

            Details: There's this weird iOS thing (not sure if it's a bug or not): with -webkit-overflow-scrolling: touch anywhere except for on the <body> element, supposedly breaks the topbar-tap feature, but Talkyard uses -webkit-overflow-scrolling: touch on a not-<body> element, because of the sidebars and bottom editor.
            https://stackoverflow.com/questions/8970740/ios-safari-scroll-to-top-does-not-work-on-certain-pages-why

            Talkyard has a "Scroll" button though, which can scroll to top, but it's hidden in the forum topic list by default. I can make it visible. (Then, will work on both Android and iOS.)

            On a laptop, the Page Down and Up buttons should work directly, hereafter though (in the upcoming version).

            2) @chrscheuer I've fixed (in the upcoming version) the forum categories & topics list horizontal scroll issue. (By adding word-wrap: wrap-word, so long words won't extend past the screen, and some other CSS tweaks). There's two Soundflow specific styles, sth like: padding: 20px margin: -20px though, which might need some tweaking.

            3)

            issues scrolling on the notifications popup on mobile

            I'll try to have a look later this week. Couldn't reproduce in Chrome Dev Tools.

            ***

            Anyway a new version coming up now soon — and Christian, I remember you mentioned the sort order was sometimes off (not always oldest-first, although supposed to be). I found a bug related to that: Ty sorted by latest-approval-date, instead of reply creation date — and then, if one edited one's reply, it typically got auto-approved by System, and then the last-approval-date got bumped, so a post that had been at the top, and got edited later, could get moved to the bottom of the page. (Will be fixed in the upcoming version.)

            Reply3 Likes
            1. K@KajMagnus
                2021-06-21 09:38:08.771Z2021-06-25 04:24:41.939Z

                1) @chrscheuer now this fixed: "Instead, I can add a "real" button, to scroll to top" — however, there's SoundFlow specific CSS that hides the scroll button.

                You could make it appear in the topic list, as follows:

                .s_PT-7 .esScrollBtns_fixedBar {
    display: block;
}

.btn.esScrollBtns_back,
.btn.esScrollBtns_menu {
    background: hsl(207deg 80% 54%) !important;
}

                If you want to see how the button looks / works, go here: https://www.talkyard.io/forum/latest, scroll down a bit — then, a "Scroll" button appears at the bottom. (I wonder if that's the best place to show it, or ... Maybe at the top? But then it might "collide" with the top bar, hmm)

                (Mentioning only Christian now, since this won't work for the others, yet.)

                3) "issues scrolling on the notifications popup on mobile" — I forgot, I'll make a note to myself in the source this time. Edit: See below.

                Reply
              • K
                In reply toChris_Shaw⬆:
                @KajMagnus
                  2021-06-25 04:13:26.414Z

                  @chrscheuer

                  in Chrome on mobile, I can't scroll down to see the rest of the notifications on my phone

                  I tried in Chrome on an Android mobile, worked fine in my case (I click my username, and the username dropdown opens, with many notifications — I can then scroll down in the notification list). I wonder, you don't happen to use Chrome on iOS?

                  Reply
                  1. Christian Scheuer @chrscheuer2021-06-25 15:06:50.130Z

                    Yes, I'm using Chrome on iOS.

                    Reply
                    1. Christian Scheuer @chrscheuer2021-06-25 15:07:23.461Z

                      It's the same issue with Safari on iOS.

                      Reply
                  ReplyAdd progress note