greyshade
greyshade copied to clipboard
shashankmehta
iOS weirdness?
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.
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! :thumbsup:
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.
I'm on ElementaryOS + Android devices :smile: My friends have iPads, so this won't be an issue.