X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

Firefox miclaculates CSS calc()

  • 2 replies
  • 2 இந்த பிரச்னைகள் உள்ளது
  • Last reply by cor-el
பதிவிடப்பட்டது

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

Additional System Details

நிறுவப்பட்ட நிரல்கள்

  • The AddLive plugin allows you to experience high quality audio and video conferences in your browser.
  • Adobe® Acrobat® Plug-in for Web Browsers, Version 15.020.20042
  • Creative Cloud Desktop Plugin.v_3_0_0_0
  • Provides information about the default web browser
  • The Google Earth Plugin allows you to view 3D imagery and terrain in your web browser.
  • Displays Java applet content, or a placeholder if Java is not installed.
  • Microsoft Lync 2010 Meeting Join Plug-in
  • Microsoft Office for Mac SharePoint Browser Plug-in
  • Shockwave Flash 23.0 r0
  • 5.1.50428.0
  • Plugin for Wacom tablets.

பயன்பாடு

  • Firefox 50.0.2
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:50.0) Gecko/20100101 Firefox/50.0
  • Support URL: https://support.mozilla.org/1/firefox/50.0.2/Darwin/en-ZA/

நீட்சிகள்

  • Application Update Service Helper 1.0 (aushelper@mozilla.org)
  • Edit Cookies 0.3.8.1.1-signed.1-signed ({ea2b95c2-9be8-48ed-bdd1-5fcd2ad0ff99})
  • feedly 16.0.528.1-signed.1-signed (feedly@devhd)
  • Firebug 2.0.18 (firebug@software.joehewitt.com)
  • FireFTP 2.0.28 ({a7c6cf7f-112c-4500-a7ea-39801a327e5f})
  • Greasemonkey 3.9 ({e4a8a97b-f2ed-450b-b12d-ee082ba24781})
  • Html Validator 0.9.7.4 ({3b56bcc7-54e5-44a2-9b44-66c3ef58c13e})
  • Multi-process staged rollout 1.5 (e10srollout@mozilla.org)
  • Pocket 1.0.5 (firefox@getpocket.com)
  • Print Friendly & PDF 2.0.2 (jid0-YQz0l1jthOIz179ehuitYAOdBEs@jetpack)
  • Wappalyzer 3.2.7 (wappalyzer@crunchlabz.com)
  • Web Compat 1.0 (webcompat@mozilla.org)
  • Web Developer 1.2.11 ({c45c406e-ab73-11d8-be73-000a95be3b12})
  • YSlow 3.1.8.1-signed.1-signed (yslow@yahoo-inc.com)
  • Adobe Acrobat DC - Create PDF 15 (web2pdfextension@web2pdf.adobedotcom) (Inactive)
  • Force PDF Download 0.1.2.1-signed.1-signed ({d7f46ca0-899d-11da-a72b-0800200c9a65}) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x0d26
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x8086
  • crashGuards: []
  • currentAudioBackend: audiounit
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'HW_COMPOSITING'}, {u'status': u'available', u'description': u'OpenGL Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'OPENGL_COMPOSITING'}]}
  • info: {u'TileHeight': 1024, u'TileWidth': 1024, u'AzureFallbackCanvasBackend': u'none', u'AzureCanvasAccelerated': 1, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • supportsHardwareH264: Yes
  • webgl2Renderer: (no info)
  • webglRenderer: Intel Inc. -- Intel Iris Pro OpenGL Engine
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
philipp
  • Top 25 Contributor
  • Moderator
5330 தீர்வுகள் 23532 பதில்கள்
பதிவிடப்பட்டது

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

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)

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
  • Top 10 Contributor
  • Moderator
17670 தீர்வுகள் 159841 பதில்கள்
பதிவிடப்பட்டது

For reference:

  • Bug 1323735 - Misinterpreting CSS calc()
For reference: *Bug 1323735 - Misinterpreting CSS calc()