Why are webviews not rendering as expected?
Learn how to solve common webview rendering issues and get your webviews displaying properly.
Written by Lucy Fairhurst
Updated at October 13th, 2023
Table of Contents
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
Adding styles based on query parameter on URL
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)