Using EPiServer 7.x and Chrome on a a touch screen laptop

This post is a quick write up of an issue I noticed when using Google Chrome on a touch screen Windows 8.1 machine when using EPiServer 7.5 and how to solve it.

The problem

I was using a Windows 8.1 touch screen laptop with Google Chrome installed to access an EPiServer 7.5 site. I noticed the UI didn't seem to fully work. Specifically the context menus didn't appear when I hovered over blocks with a mouse and also I couldn't drag blocks to rearrange or add a new block. Using a mouse to hover over a block I expected to see this:

But only got this:

I tried a different EPiServer site and noticed the same problem. The same version of Chrome (34.0.1847.131) worked fine on another machine so I knew it wasn't the EPiServer installation and/or version of Chrome.

Firefox and IE both worked fine with a mouse so it had to be the configuration of Chrome or Windows. The only thing that was different about this laptop was that it was touch screen...

The cause

The cause appears to be an issue where Chrome reports itself as a touch device. The EPiServer UI responds accordingly and renders the touch sensitive UI and not one that works with the mouse.

This works fine if you want to use the touch screen to interact with EPiServer but not so well if you prefer to use a mouse.

This only seems to be an issue with Chrome as Firefox and IE both work with a mouse on a touch screen laptop.

Solution (a work around)

I considered turning off the touch capabilities but what I really needed was for Chrome not to identify itself as touch capable. This is possible using Chrome flags. Chrome has a configuration section that allows it to be configured that's accessible by

Chrome://flags

In there is as "Enable touch events" setting:

Disable the touch events and restart Chrome and voila the UI all works properly with a mouse.

Disclaimer

I am an EPiServer employee, however this post is personal and is not associated with official EPiServer support channels.

Comments