Bug (found?): Rendering of Dashboard Pages in Firefox (current) fails in 5.3.12

Your Setup:

  • SeaTable Self-hosted 5.3.12, but verified on Seatable Cloud
  • Most Current Firefox (tried even 142 Beta)

Describe the Problem/Error/Question:

What I initially thought to be a problem of our age-old company-maintained Firefox ESR 128 (see here) seems to be a bug introduced with Seatable 5.3.12. We didn’t have the same Problem with Seatable 5.2.7

As usual, I’d like anyone to verify this. I have reproduced the problem from scratch on Seatable Cloud (free), and used an unspoiled Firefox browser in private mode.

I think this is a signifcant bug, but probably easy to fix, because it didn’t occur in Seatable 5.2.7

To reproduce (not exclusively, but reliably)

  1. Build a universal app with a static dashboard page
  2. Fill the page with alternate sections of “text” elements (e.g. 30px headlines) and multi-column container sections filled with formatted text (see example below)
  3. Watch the page in Firefox. The formatted text sections seem empty, but in my example, there are just not expanded, showing just the empty space before the H1 headings.

In Firefox, the container sections with formatted text are there, but they do not expand vertically, which is shown by the DOM model.

Chrome-based browser

Current Firefox

Just tested firefox under Linux (ChromeOS / Debian): better, but still one section collapsed. Is it a timing problem?

I found the culprit, as it seems. In media/dtable-apps/universal-apps/main.js?version=5.3.101 there is the following function updateSectionHeight and othes (I counted 4 times) that seem to be affected by the 10ms timeout:

               this.updateSectionHeight = () => {
                  this.timer &&
                  clearTimeout(this.timer),
                  this.timer = setTimeout(
                    (
                      () => {
                        let e = 0;
                        Object.values(this.idElementRefMap).forEach(
                          (
                            t => {
                              const {
                                height: n
                              }
                              = t &&
                              t.getBoundingClientRect ? t.getBoundingClientRect() : {
                                height: 0
                              };
                              e = Math.max(n, e)
                            }
                          )
                        ),
                        this.sectionRef &&
                        (this.sectionRef.style.height = ''.concat(e + 18, 'px')),
                        this.timer = null
                      }
                    ),
## Here's the bug v v v
                    10

The problem lies with the timeout((),10). In Seatable 5.2.7, the timeout was 0, meaning for all I know “as soon as possible”. Now, it’s a very sporty 10 Milliseconds, and (our/my) Firefox rendering engine is just to slow.

As a test, I tried 1000ms, and it started working again. The original timeout of 0 from 5.2.7 seems to work unreliably in 5.3.12, but that might be due to my debugging.

I have provisionally patched the timeout value to 666ms, since 0 didn’t work any more

sed -i -e 's/this.timer=null}),10)}/this.timer=null}),666)}/g' \
 -e 's/n.current=null}),10)}/n.current=null}),666)}/g' \
/opt/seatable/seatable-server-latest/dtable-web/media/dtable-apps/universal-app/main.js

Works for me until a possible fix comes. Now I can update to 5.3.12.

@rdb , that’s what I meant the other day when I said that these are real benefits when you can read and patch the source code, no matter what the licence is.

Thanks for the detailed analysis! We’ll add a fix.

SeaTable 6.0, released today, comes with a fix for the issue.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.