Vincent Baaij
May 18, 2018
  1880
(3 votes)

Editing on a touch screen device

Working with a touch screen device, like a Surface Pro, Book or Laptop, might lead to some unexpected behaviour in the editor. In my case, I didn't receive any feedback on hovering the cursor over the editable parts of a page or block. So, no green (or grey on a content area) highlight and no information label with the field name. It didn't matter what browser I tried it in. Edge, Firefox and Chrome all gave me the same feedback-less experience.

It took some digging around to find out what caused this. I consulted developer support, but for them it was working as expected. I uninstalled all browser extensions/add-ons, but still no success. Then I moved to the browser specific settings. Turns out all the browsers have W3C Touch API support that you can change. After disabling this support all browsers started to show the expected highlight and label!

If you happen to have the same problem on a touch screen device, here's how you can change the mentioned setting:

Edge

Navigate to 'about:flags'. In the screen that appears scroll down to Standards Preview. For 'Enable touch events' select 'Always off' in the dropdwn list.

Image EdgeTouch.PNG

Firefox

Navigate to 'about:config'. In the screen that appears serch for 'touch_events'. Double click and set the value to '0'

Image FirefoxTouch.PNG

Chrome

Navigate to 'chrome://flags'. In the screen that appears look for 'Touch Events API'. Set value to 'Disabled'

Image ChromeTouch.png

Hope this helps,

Vincent

May 18, 2018

Comments

Erik Henningson
Erik Henningson May 19, 2018 07:38 AM

This is what I do:

Check "Limit touch support" on my users´s settings

Vincent Baaij
Vincent Baaij May 22, 2018 09:42 AM

Good catch Erik! Thanks.

That is indeed a lot easier to set and you don't mess with other sites that might depend on the original API support. 

Please login to comment.
Latest blogs
Copy Optimizely SaaS CMS Settings to ENV Format Via Bookmarklet

Do you work with multiple Optimizely SaaS CMS instances? Use a bookmarklet to automatically copy them to your clipboard, ready to paste into your e...

Daniel Isaacs | Dec 22, 2024 | Syndicated blog

Increase timeout for long running SQL queries using SQL addon

Learn how to increase the timeout for long running SQL queries using the SQL addon.

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Overriding the help text for the Name property in Optimizely CMS

I recently received a question about how to override the Help text for the built-in Name property in Optimizely CMS, so I decided to document my...

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Resize Images on the Fly with Optimizely DXP's New CDN Feature

With the latest release, you can now resize images on demand using the Content Delivery Network (CDN). This means no more storing multiple versions...

Satata Satez | Dec 19, 2024