iOS weirdness?

[alexrussell]

I noticed that (certain) code blocks on iOS look weird. I've tried inspecting the CSS (through Safari on my desktop) and can't see why it happens 0 the case styles that affect the HTML in my screenshots below affect the non0HTML and yet they render differently.

The page in question is http://alexrussell.me.uk/

Here's how it looks in Chrome on my desktop:

Chrome emulating iOS using developer tools (obviously it fails miserably at actual emulation here for whatever reason - just seems to scale things down even though I am emulating the UA and the size - the left nav does switch to being at the top so something responsive is working, but apparently something's wrong - maybe it's due to retina weirdness):

Here's a screenshot from my iOS 7 Safari showing the problem:

Here's a screenshot from my iOS Simulator showing the problem:

And for reference here's a screenshot of where it's really going wrong and affecting things:

In the remote inspector (using Safari on my desktop connected to my iPhone) I see that the <span class="line"> inherits a style of font-size: 0.9em; which comes from article pre, but as I said above, both the {{ 'hello' }} and <div class="name code blocks have the same CSS and render differently. Looking at computed style for the <span class="line"> shows the correct 14px for the {{ 'hello' }} line but oddly 23px for the <div class="name one. The highlighter classes don't appear to have any special styles that exhibit the font-size issue.

Sorry i can't be very helpful here, but hopefully the original page, screenshots, and what I've found so far well help you at least reproduce the bug.

[shashankmehta]

This does seem weird. It is fine on android native browser, opera and chrome. I'll have to borrow an iPad for testing this.
I have my majors going on right now, so I'll take a look once I'm done with them.
But thanks for pointing this out and the detailed bug report! 👍

[alexrussell]

No problem at all - if I can be any help let me know.

As for borrowing an iPad, if you use a Mac and have Xcode installed (and if not - you can install it for free from the App Store) the iPhone/iPad simulator is available and exhibits the behaviour. Not sure about debugging though.

[shashankmehta]

I'm on ElementaryOS + Android devices 😄
My friends have iPads, so this won't be an issue.