[Bug]: log viewer shaking...

[SinCheung]

When using the mouse to quickly scroll to the bottom, because the width of a row above is larger than the actual width, the view as shown in the figure below keeps shaking:

[helfi92]

Weird. I can't seem to replicate when scrolling quickly to the bottom using https://firefox-ci-tc.services.mozilla.com/tasks/dfnBQoBMQw2QMeqgcbZGpw/runs/0/logs/https%3A%2F%2Ffirefox-ci-tc.services.mozilla.com%2Fapi%2Fqueue%2Fv1%2Ftask%2FdfnBQoBMQw2QMeqgcbZGpw%2Fruns%2F0%2Fartifacts%2Fpublic%2Flogs%2Flive.log for example. If you can help me replicate, that would be appreciated.

[SinCheung]

If there is no x-axis to slide in the current display area, but there is a row on the top that can slide, use the mouse to quickly slide multiple times to trigger, 100% hit.

In the log example you provided, all areas are slidable on both the x-axis and y-axis, and there are no rows where part of the x-axis can not slide and some of the x-axis can slide, so this bug will not be triggered.

[helfi92]

Do you have a log URL I can use to try this?

[SinCheung]

Do you have a log URL I can use to try this?

I now set the width and height of lazylog to 1466*200, and the detailed log is as follows:

Test Case '-[UITestingUITests testRunner]' started.
    t =     0.00s Start Test at 2020-08-13 16:35:53.982
    t =     0.03s Set Up
2020-08-13 16:35:54.016165+0800 DemoGroup_Wda-Runner[229:3213] Built at Jul  7 2020 15:16:03
2020-08-13 16:35:54.032081+0800 DemoGroup_Wda-Runner[229:3213] ServerURLHere->http://100.73.255.224:8100<-ServerURLHere
2020-08-13 16:35:54.032506+0800 DemoGroup_Wda-Runner[229:3281] Using singleton test manager
    t =     4.11s Find the Application 'com.apple.springboard'
    t =     4.16s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =     4.27s Pressing Home button
    t =     5.34s Pressing Home button
    t =    25.58s Find the Application 'com.apple.springboard'
    t =    25.58s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    25.69s Checking existence of \`Alert\`
    t =    25.69s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    25.76s     Find: Descendants matching type Alert
    t =    25.77s Checking existence of \`Sheet\`
    t =    25.77s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    25.84s     Find: Descendants matching type Sheet
    t =    25.85s Checking existence of \`Alert\`
    t =    25.85s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    25.92s     Find: Descendants matching type Alert
    t =    25.93s Checking existence of \`Sheet\`
    t =    25.93s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    26.00s     Find: Descendants matching type Sheet
    t =    35.05s Open com.ss.iphone.xxx.DemoInhouse
    t =    35.13s     Launch com.ss.iphone.xxx.DemoInhouse
    t =    35.25s         Setting up automation session
    t =    37.20s Open com.ss.iphone.xxx.DemoInhouse
    t =    37.23s     Activate com.ss.iphone.xxx.DemoInhouse
    t =    59.12s Terminate com.ss.iphone.xxx.DemoInhouse:235
    t =    80.31s Find the Application 'com.apple.springboard'
    t =    80.31s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    80.42s Checking existence of \`Alert\`
    t =    80.43s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    80.49s     Find: Descendants matching type Alert
    t =    80.49s Checking existence of \`Sheet\`
    t =    80.50s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    80.56s     Find: Descendants matching type Sheet
    t =    80.57s Checking existence of \`Alert\`
    t =    80.57s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    80.64s     Find: Descendants matching type Alert
    t =    80.64s Checking existence of \`Sheet\`
    t =    80.64s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =    80.71s     Find: Descendants matching type Sheet
    t =    89.74s Open com.ss.iphone.xxx.DemoInhouse
    t =    89.79s     Launch com.ss.iphone.xxx.DemoInhouse
    t =    89.89s         Setting up automation session
2020-08-13 16:37:43.941684+0800 DemoGroup_Wda-Runner[229:3213] Enqueue Failure: Failed to get automation session for com.ss.iphone.xxx.DemoInhouse:248: 无法与帮助程序通信。 /Users/hongwei/code/autotest/PCGDemoAutoCase/pcg_ios_performancelib/WebDriverAgent/WebDriverAgentRunner/UITestingUITests.m 38 1
    t =   110.97s Open com.ss.iphone.xxx.DemoInhouse
    t =   111.02s     Launch com.ss.iphone.xxx.DemoInhouse
    t =   111.11s         Setting up automation session
    t =   134.16s Terminate com.ss.iphone.xxx.DemoInhouse:252
    t =   155.34s Find the Application 'com.apple.springboard'
    t =   155.35s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   155.44s Checking existence of \`Alert\`
    t =   155.45s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   155.51s     Find: Descendants matching type Alert
    t =   155.52s Checking existence of \`Sheet\`
    t =   155.52s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   155.58s     Find: Descendants matching type Sheet
    t =   155.58s Checking existence of \`Alert\`
    t =   155.59s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   155.65s     Find: Descendants matching type Alert
    t =   155.66s Checking existence of \`Sheet\`
    t =   155.66s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   155.73s     Find: Descendants matching type Sheet
    t =   164.77s Open com.ss.iphone.ugc.DemoInhouse
    t =   164.82s     Launch com.ss.iphone.xxx.DemoInhouse
    t =   164.92s         Setting up automation session
    t =   166.26s Open com.ss.iphone.xxx.DemoInhouse
    t =   166.28s     Activate com.ss.iphone.xxx.DemoInhouse
    t =   188.07s Terminate com.ss.iphone.xxx.DemoInhouse:261
    t =   209.25s Find the Application 'com.apple.springboard'
    t =   209.25s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   209.36s Checking existence of \`Alert\`
    t =   209.36s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   209.43s     Find: Descendants matching type Alert
    t =   209.44s Checking existence of \`Sheet\`
    t =   209.44s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   209.51s     Find: Descendants matching type Sheet
    t =   209.52s Checking existence of \`Alert\`
    t =   209.52s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   209.58s     Find: Descendants matching type Alert
    t =   209.59s Checking existence of \`Sheet\`
    t =   209.59s     Requesting snapshot of accessibility hierarchy for app with pid 55
    t =   209.66s     Find: Descendants matching type Sheet
    t =   218.70s Open com.ss.iphone.xxx.DemoInhouse
    t =   218.74s     Launch com.ss.iphone.xxx.DemoInhouse
    t =   218.84s         Setting up automation session
    t =   220.39s Open com.ss.iphone.xxx.DemoInhouse
    t =   220.42s     Activate com.ss.iphone.xxx.DemoInhouse
    t =   242.25s Terminate com.ss.iphone.xxx.DemoInhouse:270
    t =   243.37s Tear Down
    t =   243.38s Checking for crash reports corresponding to unexpected termination of com.ss.iphone.xxx.DemoInhouse

[helfi92]

Hm, still not able to replicate after doing:

Do you mind trying to set up a codesandbox using https://codesandbox.io/s/new? Maybe that would be better.

[SinCheung]

https://codesandbox.io/s/sharp-tdd-ob9z7?file=/src/App.js:6601-6751 The display effect is as follows:

[jiachaosun]

I have the same problem but only happens in Chrome on win10

[guntur-ricardo]

Hey @helfi92 !

I've been trying to replicate on codesandbox but it won't let me import LazyLog, I think it's a codesandbox issue. The best I can do is show my code snippet. We're using the latest V4.5.3. Chrome + Mac Catalina.

The flicker happens at the bottom of the log and I believe it happens more often depending on the height of the logs. (just a guess). I have tried messing around with style/containerStyle and the rest of the properties but no luck there. Any advice? Thanks!

https://user-images.githubusercontent.com/31665531/114898729-5e952580-9de0-11eb-903b-a7497ff3ccc5.mov

[woodreamz]

I am having the same issue. Has anyone found a solution?

[bduffany]

TLDR The fix that worked for me is to always show the scrollbar by adding this style (replace .YOUR_LAZYLOG_WRAPPER_CLASS with a selector matching the parent element of your <LazyLog> component):

.YOUR_LAZYLOG_WRAPPER_CLASS .ReactVirtualized__Grid {
  /* !important is needed here to override react-virtualized inline style attribute */
  overflow-x: scroll !important;
}

---

I am pretty sure this is happening due to an infinitely repeating sequence where the horizontal scrollbar gets hidden, then shown, then hidden again. The sequence is like this:

1. You scroll to the end of the log
2. As you reach the end of the log, a very long line past the top of the viewport is no longer visible, and react-virtualized decides to hide that long line.
3. But now the remaining lines in the viewport are very short and do not require a horizontal scrollbar, so the horizontal scrollbar gets hidden.
4. But now that the horizontal scrollbar is hidden, there is more vertical space available, so react-virtualized decides that the long line can be shown again.
5. But now since a long line is in view, the horizontal scrollbar needs to be shown again.
6. Repeat, starting from step 2

---

I am able to consistently repro with this sandbox https://codesandbox.io/s/strange-mopsa-8dyow?file=/src/App.js:470-554

Strangely, it only reproduces consistently if I am scrolled to the end of the log, then change the height attribute from 300 => 301, save (Ctrl+S), then scroll down again. I'm using Chrome 96 on Linux (Ubuntu 20.04). Note, you will probably not be able to reproduce it on macOS since scrollbars do not affect the layout (they are rendered as an overlay on top of the scrolling element).

[melloware]

FYI this is fixed in my fork:

GitHub: https://github.com/melloware/react-logviewer

Demo Site: https://melloware.github.io/react-logviewer/