It appears when taking a screenshot of a webpage using chrome headless puppeteer, scrollbars are never rendered.
To replicate:
Go to their official demo page: https://try-puppeteer.appspot.com/
Change the page.goto('https://example.com') to 'https://backbonejs.org/'.
Take a screenshot
The scrollbar in the navagation menu (on the left) is not rendered.
Is there a way to turn it on?
I came across the same problem: our CI, with the headless mode on, wasn't rendering the scrollbar anymore for some reason. After some digging, I found out about the following issue on puppeteer's Github repository.
Headless mode should not force --hide-scrollbars
The quick solution to ensure that scrollbars were rendered, both on our CI with headless and locally, was to explicitly ignore the --hide-scrollbars parameter in puppeteer's launch configuration:
this.browser = await puppeteer.launch({
// Existing config goes here...
ignoreDefaultArgs: ["--hide-scrollbars"]
});
It seems the site itself toggle scrollbars on/out according to the viewport and some other factors. If you emulate some devices via DevTools you can see the scrollbars disappear. Also, they are present in a headful puppeteer mode.
Related
I recognized this Bug on several Pages occurring in Chromium related browsers. I opened up a Chromium Issue, where the project members could not reproduce the problem - I am trying to figure out why this is happening (since the Problem occurs on Pages as like google.com, amazon.com, and so on, on several Mac-OS devices, which have nothing else in common) - we tried it on a clean Chrome installation, where The Problem is also occurring. To me it seems to be a bug - now I'd like to know if other people are also not able to reproduce. If you can reproduce (to reproduce read the following lines below) and/or find something new/interesting about the problem consider supporting the Ticket/Chromium Issue.
Chrome Version
91.0.4472.101 (Offizieller Build) (x86_64)
URLs tested
https://www.google.de/
https://www.microsoft.com/de-de
https://www.amazon.de/
Other browsers tested
Safari: hasn't the problem
Firefox: hasn't the problem
Edge: has the same issue (also Chromium based)
Chrome Canary: has the same issue (also Chromium based)
How to reproduce the problem?
Refresh Page (Command+Shift+R) and Scroll upwards while page is loading or in parallel (you have to be quick to reproduce).
What is the expected result?
Expectedly the Page should not over-scroll and stop at the pages top/end instead the page can be scrolled infinite above the pages top, same issue appears by scrolling down, where scrolling should stop at the bottom of the page.
What happens instead?
Browser keeps scrolling above the pages top/bottom infinitively. Once triggered the infinite scrolling wont disappear, even after refreshing the page - the only way to change the behavior is to copy the url and paste it within a new tab.
Small update: it seems like the problem appears when using a logitech mx master mouse (if you run into the problem when not using this specific model, let the chrome people know) - it looks like it can be solved by following steps:
Open a terminal window.
Type in the following command then hit enter:
defaults write -g NSScrollViewRubberbanding -bool false
Source: https://www.computerworld.com/article/2726533/turn-off-elastic-scrolling-in-os-x.html
Hopefully they'll fix the problem in chrome itself, until then this should solve the problem.
Update: See Irgend Son Hansel answer
I don't think there's an official fix currently, but what I do when this bug comes up is to simply click the scroll bar. It usually fixes it for a while before it comes back up again.
I am not entirely sure what the OP is asking but I assume they are looking for a fix or a workaround for this?
I occasionally experience the same on my MacOS machine. For me, refreshing page does not work. What I do is the following:
copy url of the current page
open new tab and navigate to the same url
close old tab
I was testing a website with the Developer Tool of Firefox and I was facing a weird bug. Then I checked the window width with a simple console log console.log($(window).width) and I saw that the reported width in developer tools wasn't the same that javascript was detecting.
I tried than with the Google DevTools and showed width was consistent with the console log width.
Is this a Firefox bug or am I doing something wrong? Actually on a real mobile device and on Google DevTools the website works as it should, but if I test the same page on Firefox I see a bug that actually doesn't exists (and for this reason I've lost some time).
This are a couple of screenshots to better explain what I mean:
Google Chrome
Firefox
Resizing the browser window doesn't effect the JavaScript $(window).width
The problem is in the documentation for developer tools IMHO.
They don't mention a thing about the Touch Simulation changing the behavior of the rendering.
AFAIK, the Touch Simulation activates some form of "logical pixels" mode, where lengths are translated using device DPI, or perhaps DPR.
Deactivate it and see for yourself.
According to the official instructions using Chrome DevTools from the host browser to debug the connected mobile device, I see that the remote debugging window opens, where the layout is by default vertically split, i.e. the screencast of Chrome mobile browser appears on the left while the DevTools instance on the right.
I know that we can adjust the dock position of DevTools on the host browser. How can we achieve this similarly to split the remote debugging window horizontally, docking the screencast on the top and the DevTools on the bottom?
This isn't currently possible.
Outstanding feature request: https://crbug.com/620427
The more stars the request gets, the more likely the team is to implement the feature.
When I open Developer tools and turn on device mode, and click any drop down on the page chrome renders options with minimum width and rest of the area as black.
I dont know what is causing this error. I tried to update my graphics card driver, but problem still exists.
After some googling, got to know that this is an issue in Chrome browser itself. Refer the following link for more info - https://bugs.chromium.org/p/chromium/issues/detail?id=553274&q=status%3Aunconfirmed&sort=-id&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&num=1000
I'm using angular ng-include on my page. Every time I make a change on the .html included, the changes doesn't take effect on chrome and Opera, but does take effect on Firefox. I'm using XAMPP to run my page. Any ideas?
This is probably because of angular's $templateCache.
A quick solution is to flush your browser's cache, or in Chrome dev tools on the bottom right click on the gear and tick the option Disable cache (while DevTools is open)