Scrollbar Anywhere conflicts with Enhanced Image Viewer

[ghost]

The Enhanced Image Viewer extension improves the experience of viewing images in Chrome: https://chrome.google.com/webstore/detail/enhanced-image-viewer/gefiaaeadjbmhjndnhedfccdjjlgjhho

Unfortunately it appears that Scrollbar Anywhere causes trouble when using Enhanced Image Viewer. The trouble is that when I click and drag on an image to pan around and then I release the left mouse button, Scrollbar Anywhere doesn't release the page. Instead, even though I am no longer pressing a mouse button the cursor continues to pan around the image. Instead, I have to left click on the page again to get Scrollbar Anywhere to stop dragging the image.

Here is a quick screencast where I illustrate the issue: http://ca.mag.cm/3m2c0I2p3R2b

While I understand that the problem here could lie with the developer of Enhanced Image Viewer, I wanted to first check here to see if there was anything that could be done to fix this issue from this end. For example, I see that Scrollbar Anywhere contains a blacklisting feature, but the feature only seems to support domains instead of file types as well.

My setup:

• Mouse button used when scrolling: Left mouse button
• Chrome version: Version 61.0.3163.100 (Official Build) (64-bit)
• Operating system: Mac OS 10.13

[davidparsson]

Hi, and thanks for your report.

Without looking at any code, I'm guessing that it's the Enhanced image viewer that causes this to malfunction. I think that plugin catches and cancels the mouse events needed for the scrolling to work properly.

Would you mind enabling debug logging in the extension, reloading a tab, open the JavaScript console and then reproduce the issue again, as done in the video? Posting that log here might help decide if my assumptions are correct.

[ghost]

I apologize for creating this thread and then going AWOL for a week. (Migraine headaches)

I would be happy to perform those steps you mentioned to learn more. However, I'm unable to figure out how to "enable debug logging in the extension" despite Googling for an answer. I've worked with the Console tab of the Developer Tools before, but I'm not sure how to get that to interact with the Enhanced Image Viewer extension. Could you give me a hint?

[davidparsson]

Ouch, no worries.

The debug logging is a feature of this extension, so it is enabled on the extension's options page. I guess I could have said that right away. I apologize for that!

Thanks for helping out!

[ghost]

Ahhhh, I had seen that checkbox when originally poking through the Options window and forgot it was there. Thank you for the tip!

I had a little bit of trouble getting the console to stop filtering content, but I think I got it to show what you are looking for: http://ca.mag.cm/1R0o3x262e3V

I'm not sure how to export the content of the console without copy/pasting, but here it is nonetheless (screenshot if that works better: http://ca.mag.cm/1k0b3O1v2t3T):
SA: saveOptions: {blacklist: "twitter.com↵reddit.com↵drive.google.com↵imgur.com↵fastmail.com↵redbust.com↵google.com↵", button: "0", cursor: true, debug: true, friction: "10", …} content_script.js:322 Initial replacements took 572ms. react-dom.js:5429 Download the React DevTools for a better development experience: https://fb.me/react-devtools ImageView.tsx:398 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 setUpMouseCallbacks @ ImageView.tsx:398 enhance @ ImageView.tsx:456 onLoad @ ImageView.tsx:464 ReactErrorUtils.invokeGuardedCallback @ react-dom.js:9017 executeDispatch @ react-dom.js:3006 executeDispatchesInOrder @ react-dom.js:3029 executeDispatchesAndRelease @ react-dom.js:2431 executeDispatchesAndReleaseTopLevel @ react-dom.js:2442 forEachAccumulated @ react-dom.js:15423 processEventQueue @ react-dom.js:2645 runEventQueueInBatch @ react-dom.js:9041 handleTopLevel @ react-dom.js:9052 handleTopLevelImpl @ react-dom.js:9129 perform @ react-dom.js:14724 batchedUpdates @ react-dom.js:8805 batchedUpdates @ react-dom.js:12852 dispatchEvent @ react-dom.js:9204 content.js:37 SA: click MouseEvent= MouseEvent {isTrusted: true, screenX: 900, screenY: 300, clientX: 433, clientY: 181, …} dragElement= <body style=​"background:​ rgb(122, 122, 122)​;​ margin:​ 0px;​ overflow:​ hidden;​">​…​</body>​ gestures.js:1 [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 D @ gestures.js:1 v @ gestures.js:1 content.js:37 SA: unclick, no drag content.js:37 SA: click MouseEvent= MouseEvent {isTrusted: true, screenX: 935, screenY: 325, clientX: 468, clientY: 206, …} dragElement= <body style=​"background:​ rgb(122, 122, 122)​;​ margin:​ 0px;​ overflow:​ hidden;​">​…​</body>​ gestures.js:1 [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 D @ gestures.js:1 v @ gestures.js:1 content.js:37 SA: drag start content.js:37 SA: drag update 17content.js:37 SA: drag update content.js:37 SA: drag stop content.js:37 SA: drag update content.js:37 SA: click MouseEvent= MouseEvent {isTrusted: true, screenX: 1097, screenY: 329, clientX: 630, clientY: 210, …} dragElement= <body style=​"background:​ rgb(122, 122, 122)​;​ margin:​ 0px;​ overflow:​ hidden;​ cursor:​ auto;​">​…​</body>​ gestures.js:1 [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 D @ gestures.js:1 v @ gestures.js:1 content.js:37 SA: unclick, no drag

[davidparsson]

Now it's my turn to be sorry for the delayed answer. I've tried finding the cause of this, but it's hard without access to what's going on in the other extension. The short (but not so helpful) answer is that if the same mouse button is used for both extensions, conflicts like this one is likely to occur.

I have a very limited amount of time to spend on this project, so I don't think I can get any further at this point. I'll leave this open for the future though, should anyone else want to resolve it. Sorry about that!

[davidparsson]

If you're willing to try, reporting this to Enhanced image viewer might yield better results.