search

paulrouget / dzslides

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.
http://paulrouget.com/dzslides
932 stars 255 forks source link

Chrome handling of mouse drag to select text inside scrollable area causes slide transition #104

Closed kkifa closed 11 years ago

kkifa commented 11 years ago

On Chrome 22 on both Windows 7 and OSX 10.6 if you drag the mouse while pressing left mouse button to select the text inside a scrollable area (overflow:auto), it triggers transition to the next slide.

hsablonniere commented 11 years ago

I'm suspecting a behaviour conflict between touch and click events. I'll check that ASAP.

kkifa commented 11 years ago

I put some debug statements into touch events, and nothing printed to the console. It seems like when dragging the mouse the Webkit-based browsers are attempting to 'select' more content, hence move the slide to the left. If you drag the mouse in the left direction, the behavior is normal: text is selected, but no transition occurs.

hsablonniere commented 11 years ago

Humm, interesting. Can you provide a test case as a jsfiddle or something please?

kkifa commented 11 years ago

http://jsfiddle.net/vQMVA/ It's a standard template.html from dzslide's github page. Second slide has an overflow:auto div surrounding all the content. Make sure you resize the bottom right presentation box in such a way that you see black 'margins' to the left and the right of the slide. Makes repro easier. Drag the mouse, left to right, to select the text on the first line, past the scroll bar and the slide will exhibit the 'transition' behavior.

hsablonniere commented 11 years ago

I'm not sure we can help. If you change the overflow:hidden to overflow:visible on the body, you won't have your problem anymore. You'll just have the problem that on large screens, we can now see previous and next slides. This can be resolved with some CSS.

I'm not sure how we could prevent this behaviour generall. Is it really a common thing to have scrollable text on slides? If the overflow trick on the body works for you, I think we'll let the code as is.

Let me know your thoughts...

kkifa commented 11 years ago

The issue is still present, but now you have to drag outside of the browser window for the slide to transition. I'd say overflow trick worked. Thanks for your input.

hsablonniere commented 11 years ago

Sorry I coulnd't help more :-(