Comment Button Spacing Error

As seen at the bottom of this picture the spacing between different options below a comment have had their spacing removed. It has appeared from today. It’s occurring in both Safari and Edge browsers on my iPhone.

Comments

  • No problem here on Android in either Chrome or duckduckgo browser (not sure what that's based on).

  • All g 4 me

  • As usual for me.

  • +1

    Which Safari version are you using? We are moving a lot of markup to flexbox + gap, which I discovered was only available since Safari 14.1 & iOS 14.5. This has been available in Chrome/Firefox for about a year…

    • I’m using iOS 14.1

  • I think it is caused by the gap attribute in the ul.links from main.css

    ul.links { display: flex; flex-wrap: wrap; gap: 5px; list-style-type: none; margin: 0; padding: 0; }

    Safari on my iPhone is good. Maybe check your iOS version or browser version, or any adblocker that might have blocked the css.

    • I’m not using an ad blocker or content blocker on Safari

      • looks like what @scotty said is correct, iOS 14.5 and above only.

        https://developer.mozilla.org/en-US/docs/Web/CSS/gap

        • Ah. I misread Scotty’s comment and thought iOS 14.1 was okay. Hmmmm I’ll have to think about upgrading…

          • -1

            @sween64: What could possibly stop you from upgrading? Sure there may be a new small bug or whatever but don't apple include their security upgrades into iOS updates?

            • @Muzeeb: Simply put: Jailbreak. I’m currently on iOS 14.1 on an iPhone XS and I can jailbreak. If I upgrade to iOS 14.7 then I’ll lose my jailbreak.

              I can deal with the no gap formatting.

  • Looks like we might need to revert some of the changes? It's a bit difficult to figure out the percentage of users affected, as both Safari on Big Slur and Safari on iOS 14.1 are reported as "Safari 14.1", although one supports gap and the other doesn't.

    • Sorry but that typo made me giggle.

  • On Windows and Android, fine for me.

  • +2

    Android for the win with this one.

  • +1

    Edge on Android here and itsallonewordformetoo.

    • +3

      Just tested with Edge on Android — strange indeed. I thought it would be using Blink based like other Chromium based browsers, but maybe they are using some older engine?

      I may roll out a fix later this arvo.

      • Thanks. I’ll keep an eye out for the changes.

      • Fixed. Thanks!

      • Fixed now. Thanks Scotty!

  • Same problem here, plus on the deals page the calendar and tags symbols are crowding the text.

    Edit - Haha, within 30 seconds of posting it is now fixed…

  • Just noticed the spacing on poll options is munted on mobile. Android using Firefox.

    One example

    And another

    Seems to be when option description is too long.

    May have been like this for ages and I have just never noticed.

    • Same for me. Example poll here, the “821+“ is cramped on the second last poll option. I’m using iOS 14.1 as mentioned previously.

      • I think the polltext is squashing the n-vote with the auto attribute

        maybe at line 1542 main.css changing

        from

        div.ozbpoll div.polltext { flex: 1 0 auto; }

        to

        div.ozbpoll div.polltext { flex: 0 0 75%; }

        might help?

Login or Join to leave a comment