Unwanted space keep comming up for random post


(Praveen Kumar P S) #1

Hello Guys,
Is it normal have this huge space in post as shown in image. It appear for random topic, not always.
I am not sure if its a bug or not. I thought to inform, thats all.

Thank you.


(Bhanu Sharma) #2

I’ve noticed this once on meta but a refresh fixed it for me and I’ve never seen this again. I don’t have an exact repro for this but I was replying with quotes from multiple replies above.


(Mittineague) #3

I just tried with my iPad Safari. Portrait - no space. Rotate to landscape - space, rotate back - no space.

It doesn’t happen in safe-mode i.e.
https://engineersasylum.com/safe-mode/


(Praveen Kumar P S) #4

Hii,
I am having this issue in Firefox. But no issue in Chrome. Is it something related to Browser ?


(Bhanu Sharma) #5

So do you smell some plugin or customization causing this?


(Mittineague) #6

When I disable only the unofficial plugins radio it still happens. When I disable only the theme radio it no longer happens. So yes, I believe custom CSS is at fault.

Try safe mode for yourself and see if it’s the same for you.


(Bhanu Sharma) #7

As I’ve mentioned earlier I’ve only seen this once. That too on meta but I’m unable to repro on my sandbox.


(Mittineague) #8

I haven’t noticed it happening here at meta, only the RTOS topic at engineersasylum. Something is causing post 3 and 4 to not display in landscape.

What theme have you selected to use? Do you recall if the topic also had a reply expansion button on the second post?


(Bhanu Sharma) #9

Light theme (the default, white one)

Here is the post link, my reply is 3rd post and it quotes something. I noticed it below that but after a refresh it went away so I thought maybe some sort of load glitch it was.


(Praveen Kumar P S) #10

I have the same problem with below topic too, first post in the topic.


(Mittineague) #11

I didn’t see anything atypical at https://meta.discourse.org/t/why-are-the-avatar-images-coming-up-http-for-wp-discourse/86208/3, and I made sure I was in light theme.

I noticed the engineerasylum site’s theme has a non-responsive width so that horizontal scroll is needed to read posts. I suspect more than only the light theme is involved there. As for here, I’ll keep an eye out for it, but if it’s sporadic and without repro steps it’s a matter of chance if I’ll ever see it happen.


(Bhanu Sharma) #12

I’ll give it a shot at other places and see if I get some robust repro steps.


(Joe) #13

I didn’t see anything weird with the first link, but I saw this in Chrome with the second link you just posted:

Are you on Cloudflare?


(Praveen Kumar P S) #14

Oh yes, I am using Cloudflare…


(Joe) #16

If you’ve ruled out any theme / plugin related issues by reproducing the problem in /safe-mode then it’s worth checking what your settings on Cloudflare look like.

Like, are you using any of their JS optimisation tools? Or are you only using Cloudflare for DNS?


(Mittineague) #17

Ah, I went on my desktop so I could use dev tools. I didn’t see the behavior but I did see what Joe posted, i.e.

<div class="cloaked-post" id="post_2" style="min-height: 202px">
  <div class="widget-connector">
    <div id="ember961" class="ember-view">
      <!---->
      <!---->
      <!---->
    </div>
  </div>
</div>

I didn’t measure, but 202 pixels is in the ball park. Considering the need for horizontal scroll, my guess is there is a CSS rule applying display: block too indiscriminately, (maybe with an !important)


(Praveen Kumar P S) #18

I have added my site to cloudflare, thats all. Not dared to tweak any settings.

Here are the list of plugin I use:


(Praveen Kumar P S) #19

Here is the whole css modification I have done on desktop version of my site.

@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');

header #site-text-logo {
    font-size: 26px;
    //font-style: italic;
    font-family: 'Redressed', cursive;
    color: #4da27d;   //#5c998b;
    position: relative;
    top: -5px;
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

.d-header {
    background-color: #4e726a;
    width: 100%;
    padding-top: 1px;
    height: 48px;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  min-height: 500px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 25px 25px; 
}
  

.extra-info-wrapper .topic-link {
    font-family: 'Philosopher', sans-serif;  
}

.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
    font-size: 13px;
}

#topic-title h1 a {
    font-family: 'Philosopher', sans-serif;
}

.badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
}

.d-header-icons .badge-notification {
    margin: 5px 0;
    //background: #00AEEF;
}

.d-header .contents {
   margin: 2px 0;
}
  /* dark gray background in body */
body {
  background-color: #323433;
  height: 100%; 
    
}
html {
  background-color: #323433; 
    
}

/* 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; 
}

(Daniela) #20

The problem is in your theme here:

#main {
  width: 1110px;
  min-height: 500px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 25px 25px; 
}

Removing this line min-height: 500px; solve the issue


(Praveen Kumar P S) #21

I made the changes as you mentioned, but still the same. I also purge the default catching from cloudflare, but still the same.