HTML/CSS not rendering correctly in webviewer

Problem description:
CSS inheritance not correct and not displaying correctly in webviewer but renders correctly when opened in a new tab.

Expected behavior:
All divs with class attributes should inherit properties from div CSS selector

Actual behavior:
borders appearing in random positions in webview but page rendering correctly if opened in full browser

Steps to reproduce:

Bug appears at this link:

Browser: Chrome.Safari
OS: MacOS 13.5.2 Windows 10
Device (Android, iOS, NA leave blank):
Desktop app version (Avatar menu->“Version”) or NA:
Plan (Free, Hacker, Pro Plan): Free/Teams for Edi

Hi @MarkHay yes this definitely looks like an issue with the webview tab.


vs new tab

I see you’ve logged it as a bug which is great. If you see slightly different output in your webview than the ones I’ve posted here please upload any further screenshots as this would help.

1 Like

Hey @MarkHay!

This issue is caused by our devtools plugin which injects itself into the webview HTML. There is nothing we can do about this natively, but you can change your CSS to only select the divs within body like so: body > div

Please let me know if that solves your issue!

1 Like

HI Shane, thanks for getting back to me. I knew I could fix it by using classes/ID’s or descendant selectors but unfortunately that was part of an example to explain the inheritance behind CSS rules and was a precursor to classes/ID’s being introduced. to a class of pupils This never seemed to be an issue before though? (or at least not that I noticed)