Repository navigation
JSPWIKI-1322 Keep the header in the flow of the page so the content d… - #576
Open
arturobernalg wants to merge 2 commits into
Open
arturobernalg wants to merge 2 commits into
arturobernalg wants to merge 2 commits into
Conversation
…oes not move on reload The header was position: fixed and a script added a spacer of its height after the page had loaded, so on a reload the content was painted under the header and then moved down. The header is sticky now and keeps its space from the first paint; the spacer is gone.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
JSPWIKI-1322: the page flashes on reload.
The header was
position: fixed, which takes no space, andwiki.yoyoadded a spacer of the header's height after the page had loaded. On a reload with cached files the page was painted with the content under the header, and the content moved down about half a second later. The header is nowposition: sticky, so it keeps its space in the page from the first paint, and the spacer is removed. The hide on scroll down and the show on scroll up are unchanged. The rules that set the width of the header in the fixed layout are removed, because the header now takes the width of its container.Measured on master and on this branch, in Chromium, on a reload with cached files, at 1327, 1000, 800 and 500 px wide: the layout shift of the content went from 0.44, 0.54, 0.68 and 0.83 to none. Before, the content moved from y=0 to y=106 (y=69 at 500 px); now it does not move. A smaller shift of the footer remains (0.046 to 0.082), which has another cause that I did not look into. In both versions the header hides when scrolling down and shows when scrolling up, and its left position and width in the fixed layout are the same at 1327, 1000 and 800 px (I tried that layout by changing the class of the container in the page, not through the user preference).
Not tested: Firefox, Edge and Safari, the editor and the other templates, the print style, the sticky toolbars of the edit page. No automated test covers this change, and the integration tests were not run.
https://issues.apache.org/jira/browse/JSPWIKI-1322