Scrolling does not work on some topics with CSS body height set to 100%

support
#1

My users and I are having a strange issue on our discourse instance, scrolling with the mouse wheel, or with the browser scrollbar, or with ‘j’ will not load more replies to a topic, no matter how fast or slow it seems. The only way to see more posts is to use the scrollbar inside the topic window.

I’ve tried to debug this with firebug and see nothing wrong, I’ve tried disabling all my firefox addons and still get the same behavior, and I’ve also tried chromium with the same behavior. Here is a link where I can reproduce it 100% of the time:

When I scroll, I can only get down to reply 20, even though the discourse scroll bar and the URL bar only say 4, and there are 44 replies total.

Any ideas or things I can try? Thanks!

edit:
Also I think this is related too, but all later posts in a topic are unread, even after I read them, or even after replying to one, unless I grab the discourse scroll bar and manually scroll to the bottom…

Big header, scroll down, make header small (Like default size)
#2

Do you have any plugins installed or have you done any customization (aside from normal CSS stuff)?

Your forum (or that particular topic at least) doesn’t scroll correctly when I visit it either, but I don’t think I’ve heard of anyone else with this issue.

#3

No, my plugins are the standard ones:

8f2e4.png888×362 19.3 KB

With the exception of GitHub - moparisthebest/discourse-migratepassword: Support migrated password hashes which doesn’t modify any UI.

My modifications are just a few color tweaks in CSS in the admin panel.

edit:
Though I just reverted to no CSS tweaks and that fixed everything :disappointed_relieved:, and I don’t know whether to be worried or glad, because why should CSS ever break javascript? here is the offending CSS if anyone cares:

/* dark gray background in body */
body {
  background-color: #E5E5E8;
  height: 100%; }
html {
  background-color: #E5E5E8;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  min-height: 500px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 25px 25px; }
  
/* set fixed container sizes */
div.full-width {
  width: 1110px; }
div.container {
  width: 1110px; }
.admin-content {
  width: 1110px; }
#user-menu {
  width: 1110px; }
.modal-outer-container {
  width: 1110px; }

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; }

/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); }

/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; }
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); }
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; }

/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; }
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; }
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333; }

/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; }
#main #topic-list th {
  background-color:#E6E6E6; }
#4

This is not a Discourse Bug.

Remove your body height 100%

5 Likes
#5
#6