Why is this HTML form sometimes rendering differently just by reloading the page in the browser?

689 views Asked by At

The following valid HTML5 document renders randomly (font and box sizes change in an unpredictable manner) just by reloading it in the browser (make sure to do shift-reloads so the browser cache gets reset). I see no reason why this should occur. What's going on?

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some title</title>
</head>

<body>

<h1>Some heading</h1>

<form id="myformid" action="myformaction.php" method="post">
    <label>label1: </label><input type="text" name="name1" required><br>
    <label>label2: </label><input type="text" name="name2"><br>
    <label>label3: </label><input type="text" name="name3"><br>
    <input type="submit" value="Submit">
</form>

<p>This is a test</p>

</body>

</html>
3

There are 3 answers

2
Fraser On BEST ANSWER

This is something specific to your current setup, and without more information it is really difficult to say exactly why it is happening...

That said there are some obvious reasons as to why it could be happening.

  1. Extensions. It could be that you have an extension or plugin that is altering the page rendering. For example Greasemonkey customizes the way a web page displays or behaves, by using small bits of JavaScript.

To ascertain if this is the case, Start Firefox in Safe Mode. Safe Mode temporarily disables all extensions, uses the default theme, and turns off hardware acceleration. To do this; Click the menu button, click "Help" and select "Restart with Add-ons Disabled…" Firefox will start up with the Firefox Safe Mode dialog. If this fixes it then note it could be either an extension or hardware acceleration - to isolate which try step 3 below.

  1. Zoom. It could be that you are inadvertently changing the zoom level of the browser thus causing the font and box sizes change.

To ascertain if this is the case reset the zoom level when you notice the change in rendering. Click the menu button on the right. The customization menu will open and you will see the zoom controls at the top. Make sure that zoom level is set to 100%

  1. Hardware acceleration. With some GPUs and drivers, Firefox can have trouble showing text or objects on pages.

To ascertain if this is the case, you can try turning off hardware acceleration to see if it fixes the problem. Click the menu button and select "Preferences". Select the "General" panel. Under "Performance", uncheck "Use recommended performance settings". Additional settings will be displayed. Uncheck "Use hardware acceleration when available".

Other than that providing screen-shots of the issue would go a long way towards isolating the cause of the rendering issue you are seeing.

0
Mahatmasamatman On

document renders randomly (font and box sizes change in an unpredictable manner) just by reloading it in the browser

Except for extensions on your browser messing with you, the only other thing that comes to my mind when you mentioned clearing the cache is that scripts/css file fails to load, or loads only partially on one of the reloads. That could make the HTML look differently. But I don't see any custom css even being used, so I'm pretty doubtful.

Edit:

Is it linked to this bug? https://bugs.chromium.org/p/chromium/issues/detail?id=319623

Edit2:

Do you by any chance have font-size set in rem's on a body tag, and are using chrome? This is the only similar issue I was able to find, and it deals with that specific thing, which is apparently a known Chrome bug.

Chrome not respecting rem font size on body tag?

0
Amit Chudasama On

Without knowing the environment setup like below few details we would not be able to help much.

  • Which OS => windows/linux/other with specific version
  • Which browser => IE/Chrome/Firefox with specific version
  • Any extension on browser/PC which making this behavior
  • and there are many more points.

I just simply saved your html and run on IE and Chrome without noticing any single difference on every fresh reloads.

So more information is required to understand the problem.