Comments (6)
wwilsman
commented on May 24, 2024
2
Thanks @frixatrix! I took a look, and will post what I found here in case others come across this issue via search.
What seems to be happening when your page is being cut off, is the <body> element has an inline style - position: fixed.
That style causes the <html> element to have a 0px height and not be scrollable. So when Percy takes the screenshot, the page is not scrollable and only the visible portion within the browser window is screenshotted.
Looking further into your other builds, it looks like this specific scenario might only occur when that cookie banner is visible. I suspect that to be the culprit here, but if you wish to work around the issue in Percy, you can use Percy specific CSS to force the <body> element to be relatively or absolutely positioned so the <html> element's height will be accurate.
from percy-puppeteer.
wwilsman
commented on May 24, 2024
1
If you're referring to a Percy config file, then yes! You can add Percy CSS to that file to apply to all of your snapshots. The percy-css option would need to be nested under the snapshot option.
Here's what that would look like for a .percy.json file:
{
"version": 1,
"snapshot": {
"percy-css": "body { position: relative !important; } .c-cookie-message__container { display: none; }"
}
}If you use a .percy.yml file, it might look a little cleaner:
version: 1
snapshot:
percy-css: |
body {
position: relative !important;
}
.c-cookie-message__container {
display: none;
}from percy-puppeteer.
frixatrix
commented on May 24, 2024
1
Hey @wwilsman thank you a lot.
It works now as expected.
Issue could be closed, thanks to you.
from percy-puppeteer.
wwilsman
commented on May 24, 2024
Hi @frixatrix!
This can potentially happen for a number of reasons depending on your styles and layout. Percy captures the DOM as-is during a snapshot and sends that off to our servers for re-rendering.
- So if the sizing of that element is determined by JS setting explicit widths and heights, it's size will remain the same when re-rendering. In this example, it could be that sometimes your testing browser has inconsistent viewport heights.
- If sizing is determined by CSS only, then this might be a result of how we must scroll the page to capture full-height screenshots. Depending on your styles, this could be a bug we need to address, or it could be some extra styles you might need to set.
In either case, if you can share a link to the Percy build, I can debug further! If you can't or don't wish to share it publicly, feel free to send me an email!
from percy-puppeteer.
frixatrix
commented on May 24, 2024
Hi @wwilsman !
Thank you.
Sent you an email.
from percy-puppeteer.
frixatrix
commented on May 24, 2024
Hi Wil,
Thank you very much.
It helped a lot.
Is it possible to add few styles into percy-css in config.json like:
"percy-css": "body { position: relative !important; },
.c-cookie-message__container { display: none; }"
Or should it be somehow different with syntax for percy-css?
Thank you in advance,
Artem
…On Mon, 13 Jul 2020 at 18:48, Wil Wilsman ***@***.***> wrote:
Thanks @frixatrix <https://github.com/frixatrix>! I took a look, and will
post what I found here in case others come across this issue via search.
What seems to be happening when your page is being cut off, is the <body>
element has an inline style - position: fixed.
That style causes the <html> element to have a 0px height and not be
scrollable. So when Percy takes the screenshot, the page is not scrollable
and only the visible portion within the browser window is screenshotted.
Looking further into your other builds, it looks like this specific
scenario might only occur when that cookie banner is visible. I suspect
that to be the culprit here, but if you wish to work around the issue in
Percy, you can use Percy specific CSS
<https://docs.percy.io/docs/percy-specific-css> to force the <body>
element to be relatively or absolutely positioned so the <html> element's
height will be accurate.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#184 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AF7KU7SYSXKABPKIWQNNE23R3M3FFANCNFSM4OWTL2RQ>
.
from percy-puppeteer.
Related Issues (17)
- CSS viewport units are not correct on chrome headless HOT 3
- Capturing a single frame inside a page HOT 2
- Local fonts not loaded on percy rendering environment HOT 6
- More helpful error logging during script injection HOT 3
- Percy agent communication blocked by CSP HOT 7
- PNG images are not displayed HOT 1
- `render.percy.local` error HOT 4
- Error: Caught error after test environment was torn down HOT 1
- During snapshot page is reloaded causing test fail HOT 6
- Support for Jest / use of ES modules dynamic import in SDK HOT 1
- `ReferenceError: window is not defined` with Jest 28 and jest-puppeteer HOT 6
- `@percy/core` development dependency issue HOT 3
- executing percySnapshot on multiple pages HOT 4
- Snapshot requires that the page URL must be HTTP or HTTPS HOT 1
- Improve error message when large DOM is sent HOT 6
- Capturing a selector instead of a page? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from percy-puppeteer.