The discussion centers around inline styles of minimal height declared for topic-post on mobile. nolo reports a distorted layout issue due to these inline styles, which are calculated and injected after scrolling. awesomerobot explains that these calculations are added to prevent scroll jumpiness when content is removed from the page, particularly on longer topics with additional replies. The height calculation was introduced in a GitHub commit to control scroll position when posts are cloaked on scroll. To fix the issue, awesomerobot suggests investigating why the .topic-post div is taller than its content in the theme.
I have a theme that slightly changes the post view on mobile. Now I see the layout gets distorted by min-height declarations that are calculated and injected as inline styles once I scroll around:
E.g. here the post is longer than it should be because of min-height:
I could declare min-heights as unset on the posts. From what I see so far it would fix the layout. But maybe I’m missing something? I don’t understand why these calculations are declared in the first place?
I don’t see these calculations in Discourse by default… is there a theme or component adding them?
Ah I see, they get added on longer topics once additional replies are loaded (and others are removed)
It looks like we add the min-height when posts are cloaked on scroll, so I think we’re grabbing the height so the scroll position isn’t changed when content is removed from the page?
I think this was where the height calculation was added originally, FIX: Scroll jumping in some dimensions of browser · discourse/discourse@a77f5a7 · GitHub which confirms that it’s meant to help control scroll jumpiness.
For fixing your specific issue, it seems that the height of .topic-post is what’s being measured… in your theme is that div taller than the content within for some reason? I wonder why it seems to be miscalculated…
