Does Discourse have a line-height problem?

HTML & CSS
1

While experimenting with youtube embeds on my localhost I noticed a quirk where post avatars were getting shifted out of their typical location. .

894×537 2.14 MB

Since no one else has mentioned a problem with this happening anywhere, my first thought was it must be only me or my Firefox browser. So I tried Chromium. Still happens.

It doesn’t happen every post, or all the time.
Maybe a media query at certain view-port widths?

Maybe the clearfix?

Using the dev tools I noticed the rule html { line-height: 19px; }
I tried changing it to 18px and that seemed to work.

But then I remembered that line-height should be unitless else expect unexpected problems.

The main Discourse SCSS file has

$base-font-size: 14px !default;
$base-line-height: 19px !default;
$base-font-family: Helvetica, Arial, sans-serif !default;

There are over 225 line-height rules in various Discourse scss files.

Many are unitless, but a good many use $base-line-height or pixel or em units.

Anyway tl;dr
Has anyone else noticed avatar shifting?

2

No, but I noticed several strange rendering quirks yesterday which only seem to affect Firefox, and which I hadn’t noticed before, but which might be related to line-height.

Scrollbars are appearing in a couple of places where there is nothing to scroll (and they do nothing).

On Suspended member profiles:

765×92 7.57 KB

On the search box - but only on the “main” pages - “Latest”, “Category”, etc.

Both of those occur with text zoom set to 100%. Decreasing it to 90%, or increasing it to 133% clears the issue with the profile; decreasing to 90% clears the textbox issue, but increasing has no effect - scroll bar remains.

I couldn’t reproduce those at Meta Discourse, so I thought it was something to do with our customisations here, but this last issue affects both sites - and again, I only noticed it yesterday.

832×78 6.33 KB

(I couldn’t decide whether that is happening in Chromium, too, to a lesser extent, or whether I was just going cross-eyed peering at it. )

1 Like
3

I’m not seeing either of those quirks but the code being used is a little dodgy in places (inline styles of height:100%, duplicated clearfix and overflow when not needed).

The scrollbar shown in your picture is weird because it is not the scrollbar from those elements. If you add overflow:auto to those elements you get the full scrollbar with arrows etc. Therefore it looks like some pseudo element is inserted into the mix that is too tall for the container and gets clipped. I couldn’t reproduce it even with forcing scrollbars everywhere.

1 Like
4

I’m also seeing it all over the Admin logs (although for obvious reasons, I can’t post screenshots of those).

5

Do you see the effect when you login under one of your aliases?

6

I was just about to try disabling add-ons, to see if that cures it. Hang on - I’ll report back shortly.

7

Also what user did you check on Meta? Did they have a suspend notice?

Did you try it with
https://meta.discourse.org/users/boomzilla/activity

8

OK. In safe mode, the search scroll bar is still there, although a little daintier.

The profile scroll bar isn’t at 100% text zoom:

742×93 18.4 KB

but it appears at 120%:

778×72 15.6 KB

It vanishes at 133%, reappears at 150%…

The Admin logs show some scroll bars, but in fewer places than when I have add-ons enabled. IIRC. (I’ll need to double-check that when I restart.) Edit: Yes, that’s right.

9

What version and what platform?

Those scrollbars don’t look like the standard default scrollbars on my system. You don’t seem to have any arrows on them unless this is a mac.

I’ve tried forcing scrollbars on every element and I don’t see those cut off scrollbars.

10

Firefox 47 on Ubuntu Gnome 16.04.

They do look like my “normal” scollbars, and although there is nowhere to actually scroll, I can make the relevant element sort of “shudder” slightly up and down by attempting to use them.

This is what my scrollbar looks like:

160×802 9.58 KB

11

Looks like a bug on your version/system possibly related to all those clearfixes.

Try injecting this code into firebug (add rule) and see if it makes a difference.

.panel-body {
    height: auto !important;
}

I’ve noticed that after using Firebug the panel-body on the search menu gets a an inline css height written with js for some reason and the height is too small.

Firefox had a very old bug with overflow and scrollbars appearing but that was fixed years ago.

12

This is frustrating. Another of those sometimes-but-not-always no-easily-discoverable-commonality quirks.

Adding

* {
  line-height: 1.2 !important;
  overflow: auto !important;
}

* Warning, don’t try it unless you’re willing to deal with messed up navigation.

sure does add a lot of scrollbars.

I am able to reproduce the “avatar shift” by removing this rule

.cooked > :first-child {
  margin-top: 0;
}

The CSS comes from a server-side cache so that adds to the difficulty of tracking it down.

My guess is the browser doesn’t always know what the first-child for newer posts is until a page refresh with the particular posts in the DOM

13

I spoke too soon.

1 Like
14

Aplogies for the late reply, @PaulOB. (If I don’t have time to do things immediately, I tend to forget. )

For some reason, I couldn’t get Firebug to let me add the rule, but I added to my user style-sheet - and it’s having no effect at all. The scrollbar is still there.

I’m seeing the scroll-bar even if I restart Firefox with all add-ons disabled.

However, it now seems my problem is with Discourse, rather than with SitePoint. When I first reported it, I couldn’t reproduce the scrollbars elsewhere, but now I’m also seeing them on Meta and on Matt’s sandbox. So irritating as it is for me, at least we know that SitePoint is not at fault.

1 Like
15

Sometimes its easier to use a plugin like this.[quote=“TechnoBear, post:14, topic:227068”]
I’m seeing the scroll-bar even if I restart Firefox with all add-ons disabled.
[/quote]

These types of bugs are the hardest to debug unless they are evident on all systems. Sometimes its down to a very specific set of circumstances or set up and unless that can be reliably reproduced its almost impossible for someone else to debug.

16

Indeed.

My original concern was that it was something amiss with the SitePoint customisations. Now I know it’s not, I don’t expect anybody else to waste time over it. It’s not a big deal to live with. Thanks for your efforts, anyway.

17

I am running my localhost Discourse in Ubuntu 16.04 Firefox 47.0 in a VM which could be a factor.

I still haven’t been able to replicate the scollbars.

One difference, my scrollbars are “orange” while yours look grey.

279×201 13.7 KB

For clarification. The “extra useless” scrollbars are there in Discourse also in Chromium (and Ubuntu Browser too) ?

I’m thinking the Bug might have to do with Ubuntu settings, in particular Text Entry,
Or maybe I’m not seeing it because I navigate by mouse.

Have you set up your Ubuntu with anything other than the defaults that you know of?

18

Ah, finally something

I unchecked html { font-size: 14px; }

308×541 27.3 KB

EDIT
The above was using Firefox Developer.

When I check in Firefox, Vivaldi, Chromium.
That CSS rule is “crossed out” and font-size has the computed CSS value of 13.006px.

19

No - only in Firefox, as I mentioned in my first post. (The clipping of the descenders in the title might be affecting Chromium marginally, too, but I can’t quite decide. )

Not that I can remember…

I certainly haven’t changed any settings in the last few weeks, and this issue has only arisen recently. FWIW, these are my Firefox settings:

717×399 37.3 KB

and these are the Chromium settings:

524×667 40.8 KB

(I tried changing the fonts to match Firefox, but still no scroll bars.)

Doing that produces scroll bars on the search box on all pages, and slightly increases the size of the search scrollbar on those pages where it was already showing.

2 Likes
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.