Seems 9.2.0 version broke screenshot of fixed positioned elements again

[delagen]

Environment (please complete the following information):

• Node.js version: any
• NPM version: any
• Browser name and version: Chrome 143
• Platform name and version: Linux
• WebdriverIO version: 9.27.0
• @wdio/visual-service ~9.2.0

Config of WebdriverIO + @wdio/visual-service

services: [
        ['visual', {
            autoSaveBaseline: false,
            baselineFolder: resolve(currentPath, 'base'),
            formatImageName: '{tag}',
            screenshotPath: resolve(currentPath, 'out'),
        } satisfies VisualServiceOptions],
    ],

Describe the bug
Capturing of fixed positioned elements saves rectangle of background under them (as was in #919), scrollbars are missing in screenshot

Scrollbars:

9.1.6

9.2.0

Overlay:
9.1.6

9.2.0

To Reproduce
I used
toMatchElementSnapshot({ disableCSSAnimation: true, waitForFontsLoaded: true })

Expected behavior
Real image of elements

Log
If applicable, add logs to help explain your problem. If you don't have log, enable 'debug:true' in the config and paste the log here.
Please use proper markdown to style it

Additional context
Add any other context about the problem here.

[delagen]

New default for hideScrollBars is true, but defining option doesn't change anything neither global nor local (method call)

[wswebcreation]

Hi @delagen

Thanks for submitting an issue, I'm trying to reproduce this issue but I'm not able, do you have a reproducible example page I can use? Have you also already tried with the latest versions of Chrome (147) and the service (9.2.2)

[delagen]

Scrollbars: https://front-sdk.t-elma365.com/iframe.html?viewMode=story&id=component-complexpopup--ui-complex-popup&globals=&args=#/
capture .complex-popup-main
Overlay: https://front-sdk.t-elma365.com/iframe.html?viewMode=story&id=component-select--ui-select&globals=&args=
capture .elma-select-panel after click on elma-select > p-select

with browser.emulate('device', 'Desktop Chrome');
may be emulate is the issue

Tried with 147 no changes

[wswebcreation]

Thanks, and with the latest version of the service?

[delagen]

Yes

[wswebcreation]

@delagen

Thanks, regarding the scrollbars, the issue is in the way we create the BiDi element screenshot. We changed it to origin: 'document', it was origin: 'viewport'. I did this for a reason because tests would fail if elements were not fully in the viewport. We have now found out that the document option skips composited layers (scrollbars, fixed elements). If I revert it then we will have other issues 😢. I need to think about this because I don't have a solution yet for BiDi, ideas are welcome

[wswebcreation]

@delagen

The only way to fix this is to add a new argument to the save/checkEelement methods, which will be this biDiOrigin?: 'document' | 'viewport', where document will be the default. You will need to provide it with viewport, and it will log stuff when there is an error. Will update that here when I have something more.
This will not break it for the rest and will also make sure that your case will work. Hope this will work for you

[wswebcreation]

Ok, I thin I have fixed it, will push the PR and run the tests on it. I'm adding 3 cases for the logs

Case 1 — element larger than viewport:

[BiDi viewport screenshot] The element dimensions (1400x800px) exceed the viewport (1280x720px). 
You must use the default `biDiOrigin: 'document'` for this element. Note: with `'document'` origin, composited layers such as scrollbars, fixed/sticky overlays, and elements using `will-change` may not appear in the screenshot.

Case 2 — element not in the viewport at all:

[BiDi viewport screenshot] The element is not in the viewport (element: x=0, y=900, 300x200px; viewport: 1280x720px). 
Call `element.scrollIntoView()` before taking the screenshot, or set `autoElementScroll: true`.

Case 3 — element partially outside but fits:

[BiDi viewport screenshot] The element is not fully visible in the viewport (element: x=-20, y=100, 300x200px; viewport: 1280x720px). 
The element fits within the viewport, scroll it fully into view by calling `element.scrollIntoView()` or setting `autoElementScroll: true`.

[wswebcreation]

Closing this one now, see #1147