Issues with rendering in iOS chrome
MarnuLombard opened this issue · 14 comments
I haven't exactly done extensive testing, but I've happenned to see your new blog in both Chrome and Safari on iOS, and there are some strange layout bugs in Chrome.
Specifically with pull quotes and the width of the layout in Chrome.
I've attached screenshots of both.
You give away great knowledge- so I figured I'd at least make you aware.
Safari
Crome
Hi @MarnuLombard and thanks for reporting.
I just fixed a few things and had a look in Chrome on my Samsung Galaxy SII. Everything looks fine so far.
Could you please clear your cache and retry to see if you still face some layout issues? Would be great.
If it is still not fixed, I suspect some bug with iOS. Given your screenshot, it looks like it doesn't care about the media queries breakpoint and go with the default layout.
Had a look and seems exactly the same.
It's definitely unique to iOS, as It doesn't appear on Chrome for desktop.
I suspect it's an issue with the syntax highlighter.
The width issue is caused by the div class="highlight" not respecting overflow="auto".
Maybe try overflow-x="scroll".
iOS
OSX
Problem with overflow: scroll is ugly scrollbars. I tried switching overflow: auto to overflow-x: auto to see if it changes something but I don't really think so.
I really don't understand why it should be a problem since Chrome Mobile supports overflow: auto without a problem. I just checked.
Could it be an issue related to hyphens: none or white-space: pre?
I think i've figured it out:
I though the error was with pygments, but I checkedtheir demos on Chrome iOS and it looks fine.
I then had a look at your document structure ands noticed something odd.
There are a lot of <p> tags where there shouldn't be.
If you have a look on line 32 & 33 of http://hugogiraudel.com/2013/02/21/jekyll/ you'll see this:
<p class="date">21 February 2013</p>
<p><section></p>
So the <section> is wrapped in a
which Chrome desktop seems to get around- but messes up the parsing on iOS. I can only imagine that older browsers will run into the same error.
Update: someone on Twitter just told me everything was fine on Chrome iOS 6.1.2.
Those p tags are caused by line breaks, interpreted as paragraphs in markdown. I'll have a look at it.
It does seem to be rendering properly on @oilvier 's phone.
I'm running 6.1.1 on Chrome 23.1271.100.
It looks fine as far back as ie7.
This may be an issue you can ignore. It seems like most browsers fix the error for you.
I don't understand why there are such empty p tags in the compiled markup. My markdown file has absolutely 0 blank line.
I've forked and edited your .md file
it seems like it's written in html not markdown.
Even though it ends up parsing inline html, the problem is that it inserts random html code (like the <p> tags)
You could try stripping whitespace or rewriting it in actual markdown format.
Mou is a really great app for editing & previewing markdown.
Problem is I used a bunch of HTML tags that cannot be used in Markdown, starting by section. Same goes for HTML class which cannot be used in Markdown. :(
Edit: My bad, it seems we can. I didn't know about that.
That's a good point.
Can Jerkyll not be responsible for that?
(I've never used it so I can't recommend)
But it's such a minor issue I think you could probably just leave it.
Such a small percentage of users will see it.
Your content is still readable.
I don't see a way to handle sections with Jekyll. I guess I could remove sections but it would probably cost a little of semantics.
Edit: The empty paragraphs only happen before and after section because Markdown wrap section between p tags.
Like I said, it's such a small percentage of users that will see the issue, and if you don't care about the code passing through the w3c validator without errors, then you can really ignore it.
Otherwise it might be worth getting hold of Mojombo to find out why it's doing this (being that there are no empty lines)
I agree that the best way to do this is to use html in your markdown files.
Thanks for listening to the issue though, sorry I couldn't be of more use.
You kidding? Thanks a lot. I'll the Jekyll team aware of this. :)