wordpress code rendering bug 

May 8, 2016

I share code on my blog from time to time in order to illustrate key points. In order to display code I use the code tag provided by WordPress. Most of the time I have no problems with displaying code, especially on any of the desktop browsers across the Mac, Linux or Windows operating systems. The only time I have a problem displaying code is on any iOS-hosted browser such as Safari, Chrome, or Opera. But before I show you the problem on iOS let me show you how successfully it renders under Android Chrome (Android 6.0.1 on a 2013 Nexus 7).

This is the prior blog entry with a Makefile and a C++ source file. The Makefile is being displayed properly. Note in particular how the text is of the proper size and alines correctly with the line numbers to the left. Now look at Chrome on iOS 9.3.1, the current release, on an iPad Air 2.

The source code file for the Makefile is grossly oversized. This poor source file display shows like this on any iOS browser, not just Chrome. And that’s because Apple forces all browsers to use the same Apple-provided rendering engine. Thus, it’s not just a problem with Chrome on iOS, but with every browser on iOS, because it’s an Apple problem. I should note that all browsers on Android render source code on my WordPress blog correctly. They each have their own rendering engines, and they all handle this correctly.