Overcoming Challenges with Apple iOS Safari While Porting Classic DOS Games for Web-Based Touch Control

A few days ago, while working on porting a classic DOS game, Alley Cat, to support web-based touch controls, I encountered several unexpected challenges, particularly with Apple's iOS Safari browser. Here, I'll share the issues I faced, the solutions I implemented, and my recommendations for providing an optimal gaming experience for iPhone users.

1. Fullscreen Mode is Blocked in Safari

One of the first hurdles I faced was Safari's restriction on enabling fullscreen mode for content other than video. Since this ported game runs entirely in JavaScript, I was unable to implement fullscreen mode, a feature crucial for immersive gameplay. Unfortunately, this limitation is specific to Safari, and no workaround has been officially supported by Apple.

2. Performance Challenges on iPhones

Performance was another issue, especially when testing the game on an iPhone 14 and iPhone 12. While the game remained playable, it ran slightly slower compared to most Android devices. This performance gap might be attributed to Safari's rendering engine, which seems less optimized for heavy JavaScript applications. On a positive note, the game's overall functionality was unaffected, but the slightly lower frame rates were noticeable.

3. Touch Gesture Disruptions

Initially, touch gestures on Safari disrupted gameplay, causing unintended interactions like scrolling or zooming. To resolve this, I added the following CSS rule

html, body {
  touch-action: manipulation;
  overflow: hidden;
} 

This simple yet effective solution eliminated the unwanted gesture behaviors, significantly improving playability.

4. Arrow Keys Display Issue

Another peculiar problem was the incorrect display of the left and right arrow keys. This issue stemmed from iOS's default font store, which lacks proper support for certain characters. The arrow keys appeared odd, disrupting the user experience. As a workaround, I used custom web fonts to ensure the arrow keys rendered correctly across all devices.

5. Testing with Chrome on iPhones

Interestingly, when testing the game on Chrome for iOS, performance improved noticeably. The game ran smoother, and none of the issues encountered on Safari were present. Chrome's support for fullscreen mode (though limited) and better handling of touch gestures made it a more reliable choice for gaming.

6. Recommendation for iPhone Users

Given these findings, I recommend iPhone users avoid Safari as their default browser for playing games hosted on our Lemon Web-Games platform, which features classic DOS games. Instead, switching to Chrome on iOS ensures a better gaming experience with fewer performance issues and improved usability.

Conclusion

Porting Alley Cat and other DOS classics to web-based touch control has been an exciting journey, though not without its challenges. Despite the limitations of Safari on iOS, the game remains playable, and the workarounds implemented have significantly enhanced the experience. For now, Chrome offers a superior alternative for iPhone users. Stay tuned as we continue optimizing our games for seamless performance across all platforms!