Demo seems to be broken on Chrome

[alexmiddeleer]

I see the following when I visit http://ember-shepherd.shipshape.io/. The tour popup does not fully appear, and appears frozen (in a partial animation?). Buttons are not clickable.

It is reproducible in Chrome Version 66.0.3359.139 (Official Build) (64-bit), but it is not reproducible in Safari Version 11.1 (11605.1.33.1.4). I am using a Mac. There is no error in the console. Warnings were:

vendor-9eb434e783f88d936264afe89fceff37.js:3908 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
on @ vendor-9eb434e783f88d936264afe89fceff37.js:3908
onTourStart @ vendor-9eb434e783f88d936264afe89fceff37.js:4137
e._join @ vendor-9eb434e783f88d936264afe89fceff37.js:1454
e.join @ vendor-9eb434e783f88d936264afe89fceff37.js:1423
ot.join @ vendor-9eb434e783f88d936264afe89fceff37.js:2433
(anonymous) @ vendor-9eb434e783f88d936264afe89fceff37.js:2437
value @ vendor-9eb434e783f88d936264afe89fceff37.js:3780
value @ vendor-9eb434e783f88d936264afe89fceff37.js:3979
start @ vendor-9eb434e783f88d936264afe89fceff37.js:4136
(anonymous) @ dummy-4bf0226f3813439d8a02071215bd140f.js:14
e.invoke @ vendor-9eb434e783f88d936264afe89fceff37.js:1399
e.flush @ vendor-9eb434e783f88d936264afe89fceff37.js:1394
e.flush @ vendor-9eb434e783f88d936264afe89fceff37.js:1402
e.end @ vendor-9eb434e783f88d936264afe89fceff37.js:1414
e._run @ vendor-9eb434e783f88d936264afe89fceff37.js:1455
e._join @ vendor-9eb434e783f88d936264afe89fceff37.js:1454
e.join @ vendor-9eb434e783f88d936264afe89fceff37.js:1423
ot.join @ vendor-9eb434e783f88d936264afe89fceff37.js:2433
(anonymous) @ vendor-9eb434e783f88d936264afe89fceff37.js:2437
l @ vendor-9eb434e783f88d936264afe89fceff37.js:250
c @ vendor-9eb434e783f88d936264afe89fceff37.js:251
vendor-9eb434e783f88d936264afe89fceff37.js:251 [Violation] 'setTimeout' handler took 78ms
vendor-9eb434e783f88d936264afe89fceff37.js:3908 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[alexmiddeleer]

Update: this is also happening after I tried using this in my app. It appears to be a problem with the drop-shadow filter css property (.shepherd-element.shepherd-theme-arrows .shepherd-content). Removing the drop shadow fixes the problem for my site and the tour.

[RobbieTheWagner]

@alexmiddeleer I'm not seeing this issue. I'm on Version 66.0.3359.170 (Official Build) (64-bit) and it all works fine. Perhaps it was a Chrome bug, that is now fixed?

[alexmiddeleer]

I updated Chrome to 66.0.3359.170 (Official Build) (64-bit) and I am still seeing the bug, unfortunately. I tried disabling extensions as well. However, my coworkers can't see this bug, so maybe it's just me ¯\ _ (ツ) _ /¯

[RobbieTheWagner]

@alexmiddeleer yeah, sounds like something weird is going on, with your specific setup. If you are able to get a reproducible case for me, that causes the error on other machines, please let me know, but I am going to close this for now.

[lozjackson]

We have come across this bug also..

It is on a macbook pro 15" mid-2015 with dual gfx cards.

The problem only occurs when using the Intel Iris Pro gfx card (built-in).. and the problem disappears upon switching to the AMD Radeon gfx (Automatic gfx switching in display preferences disable).

Chrome 67
Macbook Pro
Intel Iris Pro (built-in) / AMD Radeon (PCIe) gfx cards
ember-shepheard v3.1.0

If I inspect the element and untick the transform: translateZ(0); property, then the problem disappears...

[alexmiddeleer]

I was able to make it go away just by toggling one of the shadow-related css props iirc. Definitely a browser bug (or maybe even lower level). Just another reason every website should really be plain text with no styles 😉

[lozjackson]

This bug also affects HubSpot/shepherd (unsuprisingly)

shipshapecode/shepherd#180

and the issue is still open there, so I have left my comment there also