When you zoom in on a page in Firefox, the layout becomes distorted, whereas in Chrome, the layout remains

I have created a web page that works perfectly fine in Chrome and Firefox without zooming. However, when I zoom in Firefox, the layout breaks (even though it works fine in Chrome). You can view the live version.
Here is how it appears in Firefox:
https://i.sstatic.net/D2tNw.png
But when zoomed in, it changes to this: https://i.sstatic.net/TjDuN.png Below is the CSS code used in the creation of this webpage:

body {
  font-family: sans-serif;
}

#format_as_code {
  font-family: "Lucida Console", monospace;
  font-size: 12px;
  white-space: pre;
  width: calc(80 * 7.2px);
  background: #111111;
  color: #eeeeee;
  height: calc(24 * 14.5px);
  display: block;
}

h1 {
  text-align: center;
}

#center {
  margin-left: auto;
  margin-right: auto;
  width: calc(80 * 7.2px);
}

Any suggestions on what could be causing this issue?

cssfirefox

Answer №1

After testing in Firefox, it seems that even zooming in does not disrupt the layout (refer to the screenshot below). Consider removing the width from the 

<span id = "format_as_code">
or setting it to auto to observe any potential changes.
On another note regarding performance, I noticed that all spans, possibly representing pixels on the canvas, update every second, including those that remain unchanged!
This continuous update may lead to a noticeable decrease in performance, so it might be worth investigating further.
I will include a screenshot showing how the website appears on FF 79 64-bit for reference.
I hope this information proves useful to you!

https://i.sstatic.net/nnMPs.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating classes dynamically in Angular 2+ to trigger change detection and ensure a seamless user experience

Essentially, I am attempting to initiate a change detection loop by using renderer.removeStyle and renderer.addStyle. The style being added is a CSS animation. However, when the style is removed and re-added within the same change detection loop, Angular f ...

cssangularcss-animationsangular12

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

I have a unique situation where I need to display a dynamic list of icons in a right side bar. These icons are added to the sidebar based on user actions and are displayed using the ngFor directive. The challenge here is that some icons come from Font Awe ...

cssangularfont-awesomengforgoogle-material-icons

Styling the initial instance of an element within a parent element with jQuery and CSS

My current challenge is as follows: HTML <div id="content"> <h1>Headline</h1> <p>First paragraph that needs to be yellow.</p> <p>Second paragraph that need not change. :) </p> <p>Third parag ...

jqueryhtmlcss

CSS styles from Angular 2 components spilling outside of their boundaries

Check out the Plunker where I'm facing an issue. "If you comment out the styles in the ThirdComponent, you can see it affecting the parent and sibling components' styles." – adriancarriger (Special thanks to Adrian) Within my component, I am i ...

cssangularcomponents

Tips for arranging multiple divs in a parent div in a horizontal alignment with uniform space in between

Although there are numerous inquiries concerning this topic, I am having trouble sorting it out. As a newcomer to CSS, I am attempting to replicate the straightforward box within a box technique. You can view my Codepen here. Additionally, here is the HT ...

htmlcss

Preventing the background color from exceeding the text boundaries using CSS

I'm having trouble containing the background color within the text content. I want the right spacing to be equal to the left, but as you can see in this screenshot, the right side is not adjusting: https://i.sstatic.net/cD4GK.png Here's the cod ...

cssreactjsfrontend

CSP prevents CSS Modules styling from being applied when unsafe-inline is not allowed in the style-src directive

I've developed a React application using Create React App and implemented CSS modules for styling the components. Each CSS file is prefixed with .module.css. For example: ComponentName.module.css To use the CSS file within a component, I import it l ...

cssreactjscontent-security-policycss-modules

Streamline your CSS selectors that share a common parent for more efficiency

.content p, .content ul, .content h1 { text-indent: 35px; } Is there a more concise way to write this selector, such as .content p, ul, h1 {}?                                                      ...

csscss-selectors

Adjust the size of the password input characters without changing the appearance of the placeholder

Is there a way to enlarge the font size of an HTML password input without changing the placeholder text as well? Specifically, I am looking to increase the size of the password symbols (bullets). I attempted to adjust the font-size property of input[type= ...

javascriptjqueryhtmlcss

Unraveling CSS inheritance: A guide to overriding inherited styles

I need to make some adjustments to a WordPress template. One of the changes is to set the background color of an element to transparent. The wrapper div, which has the background color applied to it, contains many nested child divs that all inherit that co ...

cssinheritancecolorsnested

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

I've hit a roadblock in trying to figure out the React and printing issue for the past week and a half, and it feels like I'm going in circles. Despite finding some helpful solutions on Stack Overflow, none of them seem to work completely for me ...

javascriptcssreactjsprinting

Tips for aligning a title and an unordered list in the same row

https://i.sstatic.net/0Db7y.jpg I have a portfolio as an h1 element and navigation links in an unordered list. How can I position these items exactly as indicated, inline with the portfolio title? Any assistance is appreciated. #navbar h3 { ...

htmlcss

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

Can the height of one div be determined by the height of another div?

Here's the specific situation I am facing: I want the height of Div2 to adjust based on the content of Div3, and the height of Div3 to adapt based on the content in Div2. The height of Div1 is fixed at 500px. Some of the questions that arise are: I ...

javascripthtmlcsstwitter-bootstrap

"Enhancing web design with jQuery mousemove to dynamically adjust CSS filters according to mouse location

I'm attempting to create a simple mousemove event that changes the CSS filter property of my background div based on the position of the mouse. While I have successfully achieved this in the past with background-color, I am now encountering issues wit ...

jquerycssfiltermousemove

Border dividing vertically of equal length

My goal is to create a table-like appearance in a simple bootstrap grid using the row and col- classes, with vertical dividers that extend the full length of the tallest column. I have created a demo which shows that traditional methods only allow the div ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

asp.netcssasp.net-mvcvb.netextjs

The drop-down list was designed with a main button to activate it, but for some reason it is not functioning properly. Despite numerous attempts, the list simply will not display as intended

<html> <body> <button onclick="toggle()" class="nm" > main</button> <div class="cntnr" style="display : none;"> <ul class="cnkid"> <li class="cnkid"><a class="cnkid" ...

javascripthtmlcssevents

Tips for maintaining button alignment consistently horizontal on desktop devices, except when viewed on a mobile phone

On my larger monitor, the buttons are positioned in a row with three in line and the fourth one below. I would like to arrange them horizontally on desktop but stack them vertically on mobile devices. Is this possible? <!DOCTYPE html> <html> ...

jqueryhtmlcss

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

javascripthtmlcssangular