[ARCHIVED] Student app renders page differently - why?

[d_ellis]

I'm creating an infographic-style page in Canvas and the iOS student app appears to be rendering it differently to browsers (both desktop and mobile browsers). 

Browser:

App:

Why is there whitespace at the bottom of the cloud image on the app? I'm not so familiar with the Canvas student app - is this common behaviour?

[Incidentally, the page is a combination of stacked divs (with text paragraphs) and images with the colour matching the div background. All of them have 0 margins, which is why this gap is so annoying.]

[n_adamson]

Hi  @d_ellis ‌, I think that will be down to the difference in the way the app browser implements HTML compared to the other browsers you'll be testing on. Maybe have a look at the Canvas Mobile CSS to see if anything can be done there.

[d_ellis]

Thanks  @n_adamson , I was afraid that would be the case! I wonder what browsing engine the app uses - and why it couldn't just use Gecko or WebKit instead.

[rseilham]

 @d_ellis ‌,

The mobile app pulls in information from the API, cleans it up and re-renders it for the app. So, as you guessed it, they aren't using a built-in browser to render the content 1:1. The only solution is to have your Canvas admins to add some CSS to the mobile CSS in the theme editor for it to use the correct font. It's a hurdle, but it will work. Here are some examples:

https://community.canvaslms.com/message/50131-mobile-styles-css-in-the-canvas-app 

If you need anything else, just ask! 

[d_ellis]

Thanks Ryan - the font isn't really an issue here, it's the margin / padding differences on the image or div. I assume that something in the app (or its HTML rendering) is adding the whitespace, because the images and div already have their margins and padding zeroed. Our admins are very unlikely to add custom CSS to fix one page, alas  

[rseilham]

 @d_ellis ‌,

Yeah, unfortunately, is your admins are unwilling to write you a custom CSS class to handle the margins, then you really don't have really have any other options. I'd still suggest you ask because if they gave you one custom class (specific for mobile) it wouldn't have any effect on the rest of Canvas. 

[d_ellis · Accepted solution]

Thanks for your reply  @rseilham . I've found a solution! But it's not via the theme editor.

(Incidentally, I tried adding a custom class with "margin: 0; padding: 0;" to the mobile app CSS file in the theme editor, and using it on the divs, but the margin remained.)

The solution was to set the image to "display: block;" 

What I suspect was happening is that the app adds a margin to the bottom of inline elements (or maybe inline-block elements, or maybe just images - I haven't tested that!) to account for a baseline - so changing to block display sidesteps that rendering idiosyncrasy. 

[rseilham]

That's great you found a solution that worked and thanks for sharing. Yeah, it's not trivial to manage CSS between the web and mobile app, so kudos for keeping at it.