pywb

pywb copied to clipboard

Describe the bug

The new vue timeline banner causes a forced layout when an archived page is opened by clicking a link on another archived page.

Steps to reproduce the bug

Open https://webadmin.oszk.hu/pywb/20220408112834/http://oszk.hu/sajto-szoba Click on "Hírek" on the banner on the left side. The page will show up, then a blank page is shown, and it shows up again. Firefox sometimes writes a "Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. wombat.js:21:29108" message.

Expected behavior

The expected behavior is that the screen does not flash - disabling the vue timeline banner achieves this.

Screenshots

Screen capture of the same problem with different archive/different webpage: https://webadmin.oszk.hu/pywb-screen-flash.mp4

Environment

• Server: Debian 10, Python 3.7.3

• Client:

• OS: Linux, Windows

• Browser Chrome 90.0.4430 , Firefox 91.9.0esr

Additional context

I have this exact issue too on ubuntu 20.02 LTS / Pywb 2.7 beta.

It appears that the flashed/reloaded content is due to a regression in the new Vue calendar/timeline app and possibly unrelated to the forced layout warning. When I followed the logic of how the Vue app responds to a load event fired when there's a new hash in the iframe (indicating the page has changed inside the frame), I noticed this block which is causing the iframe to reload: https://github.com/webrecorder/pywb/blob/07db81021df77cf85fae48736824de4d221d04a1/pywb/vueui/src/index.js#L151-L153

Breaking it down step by step:

• The user clicks on a link in the iframe, which loads a new page
• The resulting load event is caught by the Vue app, which updates the banner accordingly
• Currently, the Vue app is then unnecessarily reloading the iframe, which is causing the undesirable UX described in this issue

I'm pretty sure this block can just be removed but will test to make sure that doing so doesn't have any unanticipated side effects.

I suggest that we open a new issue to investigate the forced layout warnings separately from the issue of flashed content, which seems to be the primary UX problem described here.

[Edit: updated URL to reference a specific commit rather than the branch]

Following up to confirm that in pywb 2.6.7 the "Layout was forced" message still appears in the console but without the flashing of content described in this issue.