Devlog 4: Fighting the 300ms Delay - Making Mobile Taps Feel Instant

I tested Tuggy on my phone for the first time this week and immediately noticed the lag. Every tap felt sluggish, like there was a delay between touching the screen and seeing the vote count change. Turns out mobile browsers have this built-in 300ms delay to detect double-tap zoom gestures.

For a rapid-fire clicker game, 300ms might as well be an eternity. I needed to kill that delay.

Killing the 300ms Delay

The fix is surprisingly simple. You preventDefault on touchstart events:

element.addEventListener('touchstart', (e) => {
  e.preventDefault();
  handleVote();
}, { passive: false });

By preventing the default behavior, the browser doesn't wait to see if you're going to double-tap. It just fires your event immediately. The difference is night and day. Taps now feel instant, just like desktop clicks.

The passive: false part is important because passive listeners can't preventDefault. I only use this on the vote buttons, not the whole page, so scrolling still works normally.

Adding Haptic Feedback

Once the touch delay was fixed, I added a quick vibration pulse on each tap:

if ('vibrate' in navigator) {
  navigator.vibrate(10);
}

It's a tiny 10ms pulse, but it makes tapping feel way more satisfying. Your phone gives you this little acknowledgment with each vote. Some people might find it annoying, so I should probably add a setting to disable it, but personally I love it.

This haptic feedback complements the other mobile optimizations like responsive CSS and touch targets to create a native app-like experience.

Preventing Annoying Mobile Behaviors

Mobile browsers do a bunch of helpful things that become annoying in a game:

• Text selection when you tap and hold
• Context menus on long press
• That blue highlight flash
• Zoom on double-tap

I disabled all of that on the voting area:

.voting-area {
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

Now you can tap as fast as you want without accidentally selecting text or triggering zoom. It feels much more like a native game.

Button Press Animation

I added a tiny scale animation on the buttons when you press them:

.vote-button:active {
  transform: scale(0.95);
  transition: transform 50ms;
}

It's subtle, but it gives you instant visual confirmation that your tap registered. Combined with the particle effects and the haptic pulse, each tap feels really satisfying.

Testing on Real Devices

I tested on my iPhone 13 and an old Android phone my roommate had. Both feel pretty good now. The key metrics I'm targeting:

• Under 50ms from touch to visual response
• 60fps during clicking (no frame drops)
• No accidental text selection or zooming

I'm hitting all three consistently. The mobile experience finally feels as good as desktop.

Takeaway

The 300ms delay thing was new to me. I'd heard about it before but never actually dealt with it. preventDefault is such a simple fix, but it makes a massive difference for interaction-heavy apps.

The haptic feedback was an afterthought but ended up being one of my favorite parts. It's wild how much a tiny vibration pulse improves the feel.

These touch optimizations work hand-in-hand with mobile-first CSS architecture to create a seamless mobile experience. Together, they ensure Tuggy feels native on mobile devices.

Next week I'm tackling the idle game mechanics and upgrade system. The core voting is solid now, but I want to add more depth.