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

The AUT shakes in Chrome 66 & Canary #1620

Closed
jennifer-shehane opened this issue Apr 20, 2018 · 20 comments
Closed

The AUT shakes in Chrome 66 & Canary #1620

jennifer-shehane opened this issue Apr 20, 2018 · 20 comments

Comments

@jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Apr 20, 2018

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.

ugdfowkupg

Steps to reproduce:

I just ran the kitchen-sink

@egucciar
Copy link
Contributor

@egucciar egucciar commented Apr 20, 2018

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
Copy link

@dannynicolas dannynicolas commented Apr 20, 2018

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 jennifer-shehane changed the title The AUT shakes in Canary The AUT shakes in Chrome 66 & Canary Apr 20, 2018
@jennifer-shehane
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Apr 20, 2018

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
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Apr 20, 2018

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
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Apr 23, 2018

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
Copy link

@dwelle dwelle commented Apr 24, 2018

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

@brian-mann
Copy link
Member

@brian-mann brian-mann commented Apr 24, 2018

@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
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Apr 24, 2018

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

@dwelle
Copy link

@dwelle dwelle commented Apr 25, 2018

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

@Igcorreia

This comment was marked as off-topic.

@samyakshah
Copy link

@samyakshah samyakshah commented May 9, 2018

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

@dwelle
Copy link

@dwelle dwelle commented May 9, 2018

@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
Copy link

@samyakshah samyakshah commented May 9, 2018

Thanks, @dwelle! That worked!

jennifer-shehane added a commit that referenced this issue May 17, 2018
…t AUT shaking in some versions of Chrome

- addresses #1620 (still would like Chrome permanent fix before closing
though)
jennifer-shehane added a commit that referenced this issue May 17, 2018
…t AUT shaking in some versions of Chrome (#1731)

- addresses #1620 (still would like Chrome permanent fix before closing
though)
@EirikBirkeland
Copy link
Contributor

@EirikBirkeland EirikBirkeland commented May 25, 2018

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
Copy link

@Nuruddinjr Nuruddinjr commented May 30, 2018

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
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented May 30, 2018

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.

mattmazzola added a commit to microsoft/ConversationLearner-UI that referenced this issue Jun 4, 2018
mattmazzola added a commit to microsoft/ConversationLearner-UI that referenced this issue Jun 4, 2018
* Install cypress

* Run cypress:open for first-run exmaple test

* Use TypeScript for tests

* Add test to create application, create entity within that app, then delete that application

* Fix typo

* test: Add plugin to disable shaking ui from

See: cypress-io/cypress#1620 (comment)

* Fix data-testid for app create button after rebase conflict

* Update cypress to 3.0.1

* chore: Move example_spec to examples folder

* Add /results to .gitignore

* Update circle CI to use npm ci and cypress base image.  Also update mochaFile output

* Rename results files and remove to console
@jennifer-shehane
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Aug 13, 2018

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: #2037 (comment)

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

@samyakshah
Copy link

@samyakshah samyakshah commented Aug 13, 2018

@jennifer-shehane
Copy link
Member Author

@jennifer-shehane jennifer-shehane commented Aug 13, 2018

@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
Copy link

@samyakshah samyakshah commented Aug 13, 2018

CarstenWalther added a commit to CarstenWalther/quasar-testing that referenced this issue Oct 10, 2019
The bug is fixed since cypress 3.0.3 according to cypress-io/cypress#1620
mattmazzola added a commit to microsoft/conversationlearner that referenced this issue Dec 16, 2019
* Install cypress

* Run cypress:open for first-run exmaple test

* Use TypeScript for tests

* Add test to create application, create entity within that app, then delete that application

* Fix typo

* test: Add plugin to disable shaking ui from

See: cypress-io/cypress#1620 (comment)

* Fix data-testid for app create button after rebase conflict

* Update cypress to 3.0.1

* chore: Move example_spec to examples folder

* Add /results to .gitignore

* Update circle CI to use npm ci and cypress base image.  Also update mochaFile output

* Rename results files and remove to console
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants