HTML/CSS not rendering correctly in webviewer

Support Bug Reports
1

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:
https://replit.com/@MarkHay/CSS-Issues#index.html

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

2

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

webview

image
image712Ă—835 21.2 KB

vs new tab

image
image909Ă—742 14.3 KB

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
3

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

image
image484Ă—557 35 KB

Please let me know if that solves your issue!

1 Like
4

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)

5

Hey @MarkHay!

It could be that it has not affected things in a serious way in the past, but you are hitting one of the limitations of webview right now. The best way to work around it is to be more specific in giving elements non-conflicting classes or similar.

To further explain: The devtools in the webview pane is its own element, so applying styles to all divs will include the devtools as well, causing the weird behavior.