Cypress: The AUT shakes in Chrome 66 & Canary

[jennifer-shehane]

Current behavior:

Application under test is :: shaking :: in Canary 68.0.3400.0. It looks like the scrollbar is duplicated? Taking up twice the space? Something is making the content displace, which I imagine is some bug in Canary - here to document and track mostly.

Steps to reproduce:

I just ran the kitchen-sink

[egucciar]

Awesome that you experienced this, its happening to me and driving me crazy!!!!!!! Chome 66

For others experiencing this and dont want to suffer the headaches you can try runnin in electron headed :)

[dannynicolas]

Yep. Upgraded to Chrome 66 and this started happening to me too.

@egucciar thanks for the suggestion of running in electron mode, that works for me.

[jennifer-shehane]

So, after taking a nice stroll through Chrome's bugs, I believe this may have to do with this open bug, where the content inside an iframe, when absolute positioned is displaced by 17px (the exact amount of the scrollbar width). Haven't confirmed if Cypress could provide a workaround.

[jennifer-shehane]

I'm back with a fix! If you want the AUT to stop shaking (until Chrome issues a fix / Cypress disables this behavior by default) - you can pass this flag to Chrome: --disable-blink-features=RootLayerScrolling

Put the code below in your cypress/plugins/index.js file as a workaround.

Example Workaround Code:

module.exports = (on) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--disable-blink-features=RootLayerScrolling')
      return args
    }
  })
}

[jennifer-shehane]

I meant to post the code for this from Cypress. This flag can be easily added here in a PR: https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/chrome.coffee#L16

[dwelle]

@jennifer-shehane that fix only seems to work for stable chrome (v66) and not for canary (v68). Can anyone confirm that?

[brian-mann]

@dwelle This is a bug in Chrome/Canary - and will likely get fixed in time. We've seen even more bizarre things like this in Canary in the past - and they naturally gets resolved.

Unfortunately, it's not feasible for us to investigate issues that are chrome bugs ahead of the official releases.

[jennifer-shehane]

@dwelle Yes, can confirm - the fix does not work in Canary (v68) 😞

[dwelle]

@brian-mann @jennifer-shehane yep, no prob. Was just confirming it's not just me.

[Igcorreia]

+1

[samyakshah]

@jennifer-shehane how can I supply this --disable-blink-features=RootLayerScrolling ? Sorry new to Cypressio

[dwelle]

@samyakshah Put that code in your cypress/plugins/index.js file.

module.exports = (on) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--disable-blink-features=RootLayerScrolling')
      return args
    }
  })
}

[samyakshah]

Thanks, @dwelle! That worked!

[EirikBirkeland]

This was driving me up the wall! Glad to see that this was not a problem on my side!

Thanks, @dwelle , that did the trick.

[Nuruddinjr]

When I run this code on stable chrome 66, screen still shakes.
Fixed with above solutions, but works with screen shaking out of the box.

[jennifer-shehane]

We added the Chrome flag --disable-blink-features=RootLayerScrolling to Cypress Version 3.0.0, so the workaround code should not be necessary anymore - yet, I know the flag did not work for everyone, so will keep issue open.

[jennifer-shehane]

We have updated the --disable-blink-features=RootLayerScrolling flag in Cypress Version 3.0.3 to only be applied for Chrome versions below Chrome 68.

If you manually added the --disable-blink-features=RootLayerScrolling flag, this will cause a new, more cumbersome issue when using Chrome 68+ as detailed here: https://github.com/cypress-io/cypress/issues/2037#issuecomment-407898194

We suggest you update to Cypress Version 3.0.3 and remove the flag workaround from your plugins file.

[samyakshah]

Hi Jennifer,

currently I have following code in my index.js, do you recommend removing
it?

on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
        args = args.filter((arg) => {
            return arg !== '--disable-blink-features=RootLayerScrolling';
        });
        return args;
    }
});

Thanks,
Samyak

On 13 August 2018 at 08:19, Jennifer Shehane [e-mail]
wrote:

We have updated the --disable-blink-features=RootLayerScrolling flag in
Cypress Version 3.0.3 https://on.cypress.io/changelog#3-0-3 to only be
applied for Chrome versions below Chrome 68.

If you manually added the --disable-blink-features=RootLayerScrolling
flag, this will cause a new, more cumbersome issue when using Chrome 68+ as
detailed here: #2037 (comment)
https://github.com/cypress-io/cypress/issues/2037#issuecomment-407898194

We suggest you update to Cypress Version 3.0.3
https://on.cypress.io/changelog#3-0-3 and remove the flag workaround
from your plugins file.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/1620#issuecomment-412555778,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC4ePF6lzzjzIcvBCKNYLV_UwK3RoQATks5uQZkNgaJpZM4TcsiB
.

[jennifer-shehane]

@samyakshah If you are on Cypress version 3.0.3 or using Chrome 68+ while testing - yes, we recommend removing that code form your index.js

[samyakshah]

Positive for both of those items. I will remove the block of code.

On 13 August 2018 at 09:16, Jennifer Shehane [e-mail]
wrote:

@samyakshah https://github.com/samyakshah If you are on Cypress version
3.0.3 or using Chrome 68+ while testing - yes, we recommend removing that
code form your index.js

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/1620#issuecomment-412575445,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC4ePI8w1PszsF1AWprUI1LytiXt-rKQks5uQaZsgaJpZM4TcsiB
.