differences in rendering of flexbox align-items: center between Chrome and Firefox

Question

differences in rendering of flexbox align-items: center between Chrome and Firefox

As I was attempting to center a div inside another div using flexbox, an inconsistency in rendering between Firefox and Chrome caught my attention.

In the scenario, there are 3 divs, each with properties display:flex, justify-content:center, and align-items:center.

Chrome View: The innermost div appears slightly off-center to the right rather than perfectly aligned at the center.

Firefox View: In Firefox, the div is accurately positioned at the center of its parent div.

If you wish to view the code for this issue, you can access it here: https://codesandbox.io/s/nice-pine-q63b5?file=/src/App.js

Firefox version being used: 69.0 (64 bit)

Version of Chrome utilized: 84.0.4147.105 (64 bit)

Operating system in use: MacOS Catalina 10.15.6

html css flexbox

Answer 1

Answer №1

UPDATE: It appears that Chrome has resolved the issue and it is no longer present.

The root cause of this issue lies in pixel precision discrepancies between Chrome and Firefox. Chrome struggles to accurately render positions with pixel decimals, resulting in rounding errors. For instance, if your child element has a width of 7px within a parent element of 14px, the side margins of the child will be 3.5px but are rounded up to 4px by Chrome. To rectify this in Chrome, consider adjusting the child's width to 6px or 8px, or increasing the parent's width to 15px.

FURTHER INSIGHT: Some cases have shown that forcing Chrome to calculate decimal pixels can be achieved by specifying decimal pixels in the element's width attribute. Keep in mind that there may still be some rounding discrepancies to watch out for, but percentages and relative units like rem, em, vw, and vh tend to yield more consistent results. Here are some examples:

Yellow exhibits issues in Chrome.
Orange displays incorrectly in Firefox.
Teal encounters problems in both browsers.
White seems to function accurately?

div {
  width: 13px;
  height: 13px;
  background: black;
  margin: 5px;
  display: flex;
  float: left;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
div:after{
  content: '';
  background: white;
}
div:nth-child(1):after {
  width: 7px;
  height: 7px;
}
div:nth-child(2):after {
  width: 6px;
  height: 6px;
  background: teal;
}
div:nth-child(3):after {
  width: 6.1px;
  height: 6.1px;
  background: orange;
}
div:nth-child(4):after {
  width: 42%;
  height: 42%;
}
div:nth-child(5):after {
  width: 50.6%;
  height: 50.6%;
  background: orange;
}
div:nth-child(6):after {
  width: .43em;
  height: .43em;
  background: orange;
}
div:nth-child(7) {
  width: 12.5px;
  height: 12.5px;
}
div:nth-child(7):after {
  width: 6px;
  height: 6px;
  background: yellow;
}
div:nth-child(8) {
  width: 1.34%;
  height: 12.5px;
}
div:nth-child(8):after {
  width: 5.5px;
  height: 5.5px;
  background: yellow;
}

<div title="pixels if subtraction equals integer works"></div>
<div title="pixels if subtraction equals decimal is bugged"></div>
<div title="if you use decimal pixels in the child bugged in Firefox"></div>
<div title="percentage seems to work"></div>
<div title="decimal percentage might fail in Firefox"></div>
<div title="em also works"></div>
<div title="decimal pixels in the parent is bugged"></div>
<div title="parent's % + child decimal pixels also bugged"></div>

Answer 2

UPDATE: It appears that Chrome has resolved the issue and it is no longer present.

The root cause of this issue lies in pixel precision discrepancies between Chrome and Firefox. Chrome struggles to accurately render positions with pixel decimals, resulting in rounding errors. For instance, if your child element has a width of 7px within a parent element of 14px, the side margins of the child will be 3.5px but are rounded up to 4px by Chrome. To rectify this in Chrome, consider adjusting the child's width to 6px or 8px, or increasing the parent's width to 15px.

FURTHER INSIGHT: Some cases have shown that forcing Chrome to calculate decimal pixels can be achieved by specifying decimal pixels in the element's width attribute. Keep in mind that there may still be some rounding discrepancies to watch out for, but percentages and relative units like rem, em, vw, and vh tend to yield more consistent results. Here are some examples:

Yellow exhibits issues in Chrome.
Orange displays incorrectly in Firefox.
Teal encounters problems in both browsers.
White seems to function accurately?

div {
  width: 13px;
  height: 13px;
  background: black;
  margin: 5px;
  display: flex;
  float: left;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
div:after{
  content: '';
  background: white;
}
div:nth-child(1):after {
  width: 7px;
  height: 7px;
}
div:nth-child(2):after {
  width: 6px;
  height: 6px;
  background: teal;
}
div:nth-child(3):after {
  width: 6.1px;
  height: 6.1px;
  background: orange;
}
div:nth-child(4):after {
  width: 42%;
  height: 42%;
}
div:nth-child(5):after {
  width: 50.6%;
  height: 50.6%;
  background: orange;
}
div:nth-child(6):after {
  width: .43em;
  height: .43em;
  background: orange;
}
div:nth-child(7) {
  width: 12.5px;
  height: 12.5px;
}
div:nth-child(7):after {
  width: 6px;
  height: 6px;
  background: yellow;
}
div:nth-child(8) {
  width: 1.34%;
  height: 12.5px;
}
div:nth-child(8):after {
  width: 5.5px;
  height: 5.5px;
  background: yellow;
}

<div title="pixels if subtraction equals integer works"></div>
<div title="pixels if subtraction equals decimal is bugged"></div>
<div title="if you use decimal pixels in the child bugged in Firefox"></div>
<div title="percentage seems to work"></div>
<div title="decimal percentage might fail in Firefox"></div>
<div title="em also works"></div>
<div title="decimal pixels in the parent is bugged"></div>
<div title="parent's % + child decimal pixels also bugged"></div>

differences in rendering of flexbox align-items: center between Chrome and Firefox

Answer №1

Similar questions

Items within a shared container are currently displaying stacked on top of each other

Challenges with z-index in Chrome/Safari and Firefox when nesting elements

The header menu is not appearing on the gray bar in Internet Explorer

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Extracting the href attribute from a child <a> tag

Ways to ensure a <div> element adjusts its height based on inner content dimensions

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Issue with submitting forms in modal using Bootstrap

Transform the functionality of DIV and UL to mimic that of a SELECT element

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

The Jquery code for Fullpage.js is causing unexpected behavior on the HTML page

Resetting the countdown timer is triggered when moving to a new page

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Can someone guide me on the process of assigning multiple classes in my situation?

Obtain all text within a <div> element by utilizing the agility html package

Enhancing Material UI List Items with Custom Styling in React.js

Generate a Selectpicker dynamically when a button is clicked

Ways to divide the value of an input text box using Angular

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional