Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Firefox miclaculates CSS calc()

  • 2 பதிலளிப்புகள்
  • 2 இந்த பிரச்னைகள் உள்ளது
  • 31 views
  • Last reply by cor-el

Jayx
Jayx
more options

We are using calc() to calculate the width of columns in a grid with fixed width gutters, but the calculation is off by a weird number and it forces the last column to drop below the rest. At first I thought that this was similar to older IE's rounding errors, but it is not.

Example:

.delivery-slots__slots, .delivery-slots__day { 

   width: calc((((100% - 35px ) / 8) * 1) + 0px);
   float: left;
   margin-right: 5px;
   margin-top: 0;

}

... where 100% = 916px (it's a modal with a set max-width) and the last child has the right margin set to zero.

Other broswers (including IE9) correctly calculates this to be 110.125px; Firefox calculates this to be 111px (web inspector) or 110.133px (Firebug) - if you take the values and add them up again, I get 916.064px, which is wider than the parent.

We are using calc() to calculate the width of columns in a grid with fixed width gutters, but the calculation is off by a weird number and it forces the last column to drop below the rest. At first I thought that this was similar to older IE's rounding errors, but it is not. Example: .delivery-slots__slots, .delivery-slots__day { width: calc((((100% - 35px ) / 8) * 1) + 0px); float: left; margin-right: 5px; margin-top: 0; } ... where 100% = 916px (it's a modal with a set max-width) and the last child has the right margin set to zero. Other broswers (including IE9) correctly calculates this to be 110.125px; Firefox calculates this to be 111px (web inspector) or 110.133px (Firebug) - if you take the values and add them up again, I get 916.064px, which is wider than the parent.

தீர்வு தேர்ந்தெடுக்கப்பட்டது

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

Read this answer in context 👍 1

All Replies (2)

philipp
philipp
  • Moderator
more options

தீர்வு தேர்ந்தெடுக்கப்பட்டது

hi, thanks for bringing this up - please file a bug at bugzilla.mozilla.org for this behaviour. (as support.mozilla.org is a mere users helping users forum and developers won't read along here)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

For reference:

  • Bug 1323735 - Misinterpreting CSS calc()