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.
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 offont-size: 0.9em;which comes fromarticle pre, but as I said above, both the{{ 'hello' }}and<div class="namecode 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="nameone. 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.