Webview gives a different display from the webpage

Bug description: When I apply a background color to the div tag on my css file, webview will display the whole page with the background color. However, when I open the page in a new tab, the normal display is shown.

Expected vs Current Behavior: The background color on my tag should not be displayed as the whole webview display.

Steps to reproduce: Simply run the code, and open in a new tab to see the difference in display. Also, when removing the background-color, the display of webview is correct. It thus seems that the problem only appears with the background-color element.

Bug appears at this link: https://replit.com/@ch-garcia/favoriteSkincareProductsHtmlCss

Screenshot(s)/Screen Recording:

Browser/OS/Device: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Replit Profile: https://replit.com/@ch-garcia

Hi @ch-garcia , welcome to the forums!
Could you try pressing the refresh button at the Webview? Or stop the repl and re-run it?
In any case, the Webview is known to be buggy, and opening it in a new tab is always the most accurate solution.
You can try the HTML Webview Auto-refresh template by selecting it on the dropdown of languages to choose from when creating a new repl.
Hope this helps!

To fix this, change the opening tag of your div elements to:

<div class="div">...</div>

And change the div selector in your CSS to:

.div {
    color: blue;
    ...
}

As for why this bug happens, I’ll look into it.

EDIT: Looks like some external code introduces an extra div element when in a iframe, meaning that when your css fills in in yellow, it goes over the screen.

1 Like

Hi, thank you for your answer ! Unfortunately this did not solve the issue, but the solution from Classfied3D solved the problem.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.