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

Comments

9 participants
@jennifer-shehane
Member

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

This comment has been minimized.

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

This comment has been minimized.

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 from The AUT shakes in Canary to The AUT shakes in Chrome 66 & Canary Apr 20, 2018

@jennifer-shehane

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

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

This comment has been minimized.

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

This comment has been minimized.

Member

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

This comment has been minimized.

Member

jennifer-shehane commented Apr 24, 2018

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

@dwelle

This comment has been minimized.

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.

Igcorreia commented May 3, 2018

+1

@samyakshah

This comment has been minimized.

samyakshah commented May 9, 2018

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

@dwelle

This comment has been minimized.

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

This comment has been minimized.

samyakshah commented May 9, 2018

Thanks, @dwelle! That worked!

jennifer-shehane added a commit that referenced this issue May 17, 2018

add chrome flag --disable-blink-features=RootLayerScrolling to preven…
…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

add chrome flag --disable-blink-features=RootLayerScrolling to preven…
…t AUT shaking in some versions of Chrome (#1731)

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

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

This comment has been minimized.

Member

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

test: Add cypress for e2e testing (#582)
* 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

This comment has been minimized.

Member

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

This comment has been minimized.

samyakshah commented Aug 13, 2018

@jennifer-shehane

This comment has been minimized.

Member

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

This comment has been minimized.

samyakshah commented Aug 13, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment