Axure Mobile Prototypes – remove annoying onTap shadow

When creating a mobile prototypes and viewing them online on my iPhone I’ve found an annoying issue.

The onTap shadow

Whenever you tap on an item, after a fractional delay a shadow appears over the element and then the on click action happens:

1) Tap on link / nav item

iPhone Shadow 1

2) After a few milliseconds shadow appears

iPhone Shadow 2

 

3) Then the desired action happens

 

How to fix it

Lennart Hennigs found a fix for this problem and the instructions are essentially a translation from his article in German.  So thanks Lennart!

Step 1 – locate your Axure RP installation

Mac OS

  • Find your Axure installation (usually in your applications folder)
  • Once you’ve found it, right click it and select “Show package contents”

Axure Show Package Contents

  • This will show you further folders.  There you need to locate the following:Contents > Resources > DefaultSettings > Prototype_Files > resources > css > axure_rp_page.css

Axure App CSS

Windows

  • In windows it should be in your Windows installation folder:Axure\Axure RP Pro 6\DefaultSettings\Prototype_Files\resources\css\axure_rp_page.css

Step 2 – Tweak the default Axure CSS

  • Open axure_rp_page.css in your text editor of choice and add the following code:

html
{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

input, select, textarea, button, a
{
-webkit-tap-highlight-color:#ccc;
}

Step 3 – Regenerate your prototype

  • And hey presto, the annoying shadows are gone …

Bonus – Make this work on AxShare

But wait, if I upload my prototype to AxShare then this won’t work because they generate the prototype for me.

Again, thanks to Lennart Hennigs amazing skills / knowledge here’s a fix to make the above work on AxShare as well.

Step 1 – Tweak the mobile prototype generation settings

  • Go into the Axure menu: Generate > Prototype > Mobile/Device
AxureApp-UserScalable

Step 2 – Adjust the mobile generation settings

  • Insert the following code into the field “User Scalable”

no”/><style type=”text/css”> html { -webkit-tap-highlight-color:rgba(0,0,0,0); outline: none; -webkit-text-size-adjust: none; -webkit-touch-callout: none; -webkit-user-select: none; } input, textarea {-webkit-tap-highlight-color:#ccc; }</style><meta param=”

PLEASE NOTE: make sure that there are no trailing spaces after the above code.  Otherwise it doesn’t work.

  • Press close or generate prototype. Either will do
  • Save your prototype

Step 3 – Upload to Axshare

  • Upload your prototype to Axshare
  • Hey presto, no more onTap shadows

Conclusion

I hope this helped and again, thanks to Lennart Hennigs for his knowledge.  If you want more information on how to build mobile prototypes, have a look at  Lennart’s excellent book “Axure for Mobile”.