Create repo page automatically scrolls down #7797

New Issue

GiteaMirror · 2025-11-02T07:36:47-06:00

GiteaMirror commented

2025-11-02 07:36:47 -06:00

Originally created by @axifive on GitHub (Sep 3, 2021).

Gitea version (or commit ref): 1.16.0+dev-195-gb6c752e91
Git version: -
Operating system: -
Browser: Desktop Opera/Chrome, Chrome Mobile
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes https://try.gitea.io/repo/create
- No
Log gist:

Description

Noticed that when opening the repo create page it quickly shows breaking layout and then automatically scrolls down.

Screenshots

Originally created by @axifive on GitHub (Sep 3, 2021). - Gitea version (or commit ref): 1.16.0+dev-195-gb6c752e91 - Git version: - - Operating system: - - Browser: Desktop Opera/Chrome, Chrome Mobile - Database (use `[x]`): - [ ] PostgreSQL - [x] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: - [x] Yes https://try.gitea.io/repo/create - [ ] No - Log gist: ## Description Noticed that when opening the repo create page it quickly shows breaking layout and then automatically scrolls down. ## Screenshots ![Untitled_screenvideo (1)](https://user-images.githubusercontent.com/844963/131940730-14cac978-e948-4322-942b-c5346b4d2867.gif)

GiteaMirror added the topic/ui type/bug labels 2025-11-02 07:36:47 -06:00

GiteaMirror closed this issue

2025-11-02 07:36:48 -06:00

GiteaMirror commented

2025-11-02 07:36:48 -06:00

@wxiaoguang commented on GitHub (Sep 3, 2021):

The bug is more obvious in Chrome.

Some guess:

The page layout may be wrong (eg: tag mismatching), or the HTML output is not smooth (eg: incomplete HTML strucutre)

So the rendered page may appear in some intermediate state (see the screen shot), then page height is very large.

Then when the page is completely rendered, Chrome tries to adjust the scrolling position during rendering. Then the page becomes what you have seen.

The screenshot about a partially rendered page. (although the page will be rendered correctly finally).

@wxiaoguang commented on GitHub (Sep 3, 2021): The bug is more obvious in Chrome. Some guess: The page layout may be wrong (eg: tag mismatching), or the HTML output is not smooth (eg: incomplete HTML strucutre) So the rendered page may appear in some intermediate state (see the screen shot), then page height is very large. Then when the page is completely rendered, Chrome tries to adjust the scrolling position during rendering. Then the page becomes what you have seen. **The screenshot about a partially rendered page. (although the page will be rendered correctly finally)**. ![image](https://user-images.githubusercontent.com/2114189/131942816-f0ed4d82-5f88-4064-823c-c492c0a3056d.png)

GiteaMirror commented

2025-11-02 07:36:49 -06:00

@silverwind commented on GitHub (Sep 3, 2021):

Is there some reliable way to get the partial rendered state? I tried with DevTools network throttling but it switches to regular layout too fast for me to pause the page.

@silverwind commented on GitHub (Sep 3, 2021): Is there some reliable way to get the partial rendered state? I tried with DevTools network throttling but it switches to regular layout too fast for me to pause the page.

GiteaMirror commented

2025-11-02 07:36:49 -06:00

@axifive commented on GitHub (Sep 3, 2021):

@silverwind Try disable

.ui.grid>.column:only-child, .ui.grid>.row>.column:only-child {
    /* width: 100%; */
}

And this property is applied before it:

.ui.grid>.column:not(.row),.ui.grid>.row>.column {
    width:6.25%;
}

@axifive commented on GitHub (Sep 3, 2021): @silverwind Try disable ```css .ui.grid>.column:only-child, .ui.grid>.row>.column:only-child { /* width: 100%; */ } ``` And this property is applied before it: ```css .ui.grid>.column:not(.row),.ui.grid>.row>.column { width:6.25%; } ```

GiteaMirror commented

2025-11-02 07:36:49 -06:00

@wxiaoguang commented on GitHub (Sep 3, 2021):

Agree axifive.

The problem is caused by mis-used fomantic layout.

Old code:

<div class="ui middle very relaxed page grid">
   <div class="column">

The inner column has a width: 6.25% by .ui.grid>.column:not(.row),.ui.grid>.row>.column {

When Chrome is loading page, before <div class="column"> ends, Chrome won't apply the :only-child.

I think the correct layout should be something like:

<div class="ui middle very relaxed page one column grid">
   <div class="column">

With one column grid (https://fomantic-ui.com/examples/grid.html) , the inside column has width 100%.

@wxiaoguang commented on GitHub (Sep 3, 2021): Agree axifive. The problem is caused by mis-used fomantic layout. Old code: ``` <div class="ui middle very relaxed page grid"> <div class="column"> ``` The inner `column` has a `width: 6.25%` by `.ui.grid>.column:not(.row),.ui.grid>.row>.column {` When Chrome is loading page, before `<div class="column">` ends, Chrome won't apply the `:only-child`. I think the correct layout should be something like: ``` <div class="ui middle very relaxed page one column grid"> <div class="column"> ``` With `one column grid` (https://fomantic-ui.com/examples/grid.html) , the inside `column` has width 100%.

GiteaMirror commented

2025-11-02 07:36:49 -06:00

@silverwind commented on GitHub (Sep 3, 2021):

Fomantic's grid system is incredibly hacky (negative margins everywhere and the width issue above during page load), I hope we can get rid of it eventually, but I'd be okay with doing a short-term fix now.

I guess this won't be the only page with such an issue.

@silverwind commented on GitHub (Sep 3, 2021): Fomantic's grid system is incredibly hacky (negative margins everywhere and the width issue above during page load), I hope we can get rid of it eventually, but I'd be okay with doing a short-term fix now. I guess this won't be the only page with such an issue.

GiteaMirror commented

2025-11-02 07:36:49 -06:00

@wxiaoguang commented on GitHub (Sep 3, 2021):

Yes, I have the same feeling. Fomantic was born very early, so what it did was already the best it could do.

Other pages may not be affected because only this page has a very long list.

@wxiaoguang commented on GitHub (Sep 3, 2021): Yes, I have the same feeling. Fomantic was born very early, so what it did was already the best it could do. Other pages may not be affected because only this page has a very long list.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#7797