Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

report: fix flicker in normal case report #9955

Merged
merged 1 commit into from
Nov 20, 2019
Merged

report: fix flicker in normal case report #9955

merged 1 commit into from
Nov 20, 2019

Conversation

yeonjuan
Copy link
Contributor

Summary

Bugfix

change .lh-sticky-header's position sticky to fixed.

Related Issues/PRs

#9141

@connorjclark
Copy link
Collaborator

connorjclark commented Nov 11, 2019

Thanks for the PR!

This needs to be sticky for devtools (#9023). Could you add a sticky declaration for .lh-sticky-header.lh-devtools, along with a comment? like:

/* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `fixed.` */

So we can get this nice fix for the regular report, but further work will be needed to fix this stutter in DevTools.


For why this is different in DevTools: the report is within a containing element. Normally, the report is the entire document, so fixed works fine in the normal case.

https://stackoverflow.com/a/48355127/2788187

If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.

@yeonjuan yeonjuan changed the title report: change to position fixed for fixing flicker (#9141) report: fix flicker in normal case report (#9141) Nov 11, 2019
@yeonjuan
Copy link
Contributor Author

@connorjclark Thanks! i changed it. :)

@connorjclark connorjclark changed the title report: fix flicker in normal case report (#9141) report: fix flicker in normal case report Nov 19, 2019
lighthouse-core/report/html/templates.html Outdated Show resolved Hide resolved
lighthouse-core/report/html/templates.html Outdated Show resolved Hide resolved
Copy link
Collaborator

@connorjclark connorjclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

@connorjclark connorjclark merged commit e402c91 into GoogleChrome:master Nov 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants