Why are webviews not rendering as expected?

Learn how to solve common webview rendering issues and get your webviews displaying properly.

Updated at October 13th, 2023

+ More

Table of Contents

Common issues Font size is displaying at different size to the website Header/Footer are showing on this webview Adding styles based on query parameter on URL

It's common for us display externally hosted web pages within our apps. Whilst they are not the best experience for users for app content e.g articles or pages, they are useful for setting pages in the app.

It isn't uncommon for these pages to render differently in our app in comparison to the original website. Unfortunately, we do not have control, or have the ability to edit anything on these externally hosted web pages.

Common issues

Font size is displaying at different size to the website

This happens when the base line font size of an external website is different to the one we use. Pugpig will use a font size of 100% as our default across the app content. However, it's not uncommon for websites to use the 62.5% font-size trick to help them handle rems better. The result of this, the font size will be bigger in our app than on the external website as our apps inject the percentage onto the <html> of the context to handle the text resize feature.

What can we do about this?

Is it possible the external web page can change to use a base line font size of 100%? We recommend using a parameter so they can deliver us an alternative version of the same page. Find out how to do this?
Pugpig could create a simplified version of the page and host it via distribution. Note that styles will differ from the website and copy will need to be edited manually by Pugpig which may not be a good solution for frequent updates.

Header/Footer are showing on this webview

Is it possible to get a version of the web page that excludes those components? We recommend using a parameter so they can deliver us an alternative version of the same page. Find out how to do this.
Pugpig could create a simplified version of the page and host it via distribution. Note that styles will differ from the website and copy will need to be edited manually by Pugpig which may not be a good solution for frequent updates.

Adding styles based on query parameter on URL

Check for query parameter and apply relevant CSS needed e.g css to hide the header and footer
The parameter will need to be unique to the site. Our example below uses ‘?webview’ but it doesn't need to be this, as long as it's unique.
(Optional) Store the query parameter in local storage to ensure the same changes will be maintained if the user navigates away from the original url. This only needs to be included if you include links that would navigate the user away from this page.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('webview');

if(myParam !== null){
  var styles = `
    .header,
    .footer { 
      display: none; 
    }`
}
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

rendering webviews

Why are webviews not rendering as expected?

Common issues

Font size is displaying at different size to the website

Header/Footer are showing on this webview

Adding styles based on query parameter on URL

Related Articles