Opening topic in new tab produces distorted layout in Firefox


(TechnoBear) #1

Using middle or right mouse button to open a link in a new tab is giving me a weird layout, with tiny content on huge whitespace. Happening consistently here on Meta, but not our own instance, which is still using an earlier version of Discourse.

Firefox 34, Ubuntu Gnome 14.10.

Doesn’t seem to be happening on Chromium.


#2

Can confirm I’m experiencing this too. Only seems to occur when opening as new tab in Firefox, not when opening link directly. Just noticed this today.

Firefox 34.05 on Windows 7

Here’s another screenshot.


(Kane York) #3

Not happening anymore for me, was it fixed?


(cpradio) #4

I just got it to happen. I can only do it in Firefox. I had to middle click two topics though before it happened.


(Mittineague) #5

I right-clicked a “reply as” and got this with Firefox 34.0 Windows 7


#6

Negative, the “tiny text” glitch is still happening for me. I also just saw it on the home page (screenshot below).


(Mittineague) #7

With this CSS I’m not surprised.

html {
    font-size: 0.73684px;
}

(Jeff Atwood) #8

Any ideas on this @awesomerobot? Seems specific to Firefox and related to the global font scale changes.


(Kane York) #9

O.o

Chrome shows that rule as crossed-out, but it’s not clear what’s replacing it.

I think Chrome is ignoring the font-size rule because it has deemed that size to be insane. EDIT: Yep, “invalid property value”.

@awesomerobot I don’t think that’s a sane font size for anyone anywhere


(Mittineague) #10

Hmm, it’s not crossed out in Firefox dev tools.


(Jeff Atwood) #11

Those come out of variables, though:

$base-font-size: 14px !default;
$base-line-height: 19px !default; 

and

html {
  color: $primary;
  font: #{$base-font-size}/#{$base-line-height} $base-font-family;
  background-color: $secondary;
  overflow-y: scroll;
}

so I guess 14 / 19 = 0.7368421052631579 but it’s clearly being ignored so this… ain’t right.

Maybe he wanted “em” there instead of “px”? 0.73684 em seems wrong though; 0.875 em seems to reproduce what we have on screen right now for me.

For now I’ll try changing it to

font-family: $base-font-family;
font-size: $base-font-size;

and let’s see what happens…


(Kris) #12

ahhh…
font: 14px/19px sans-serif

should be interpreted as

font: size/line-height font-family

SASS is dividing instead of using the shorthand there. I didn’t escape the slash.


(Kris) #13

Lost the line-height in the fix, so I added it back. Should be :thumbsup: now.

https://github.com/discourse/discourse/pull/3048


(Jeff Atwood) #14