SVG Path Element Width Calculated Incorrectly




3 years ago
2 years ago


(Reporter: connorwyatt1, Unassigned)


47 Branch

Firefox Tracking Flags

(Not tracked)



(1 attachment)



3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Steps to reproduce:

We have a viewbox=”0 0 36 36” within an SVG element with height=”36” and width=”36”.

Inside is a path element that goes edge to edge.

Actual results:

The path seems to not get the right calculation and is actually rendering outside of the bounding box for the element.

In Chrome, IE, and Safari the path is being rendered correctly, as width: 36px, however on Firefox it’s 36.0167px causing the icon being cropped by it’s container at some viewports.

Expected results:

It should render the path as width: 36px rather than incorrectly.

The only workaround we have found is overflow: visible on the SVG, however that is not a viable solution for us.


3 years ago
Component: Untriaged → SVG
Product: Firefox → Core
The path's getBBox() width is exactly 36 for me.
and I'm on a Mac too.

Comment 3

3 years ago
Created attachment 8762424 [details]
Screenshot showing the box model

I have attached a screenshot of the issue to this comment, I have no addons installed and the screenshot is of the attached plunker on my machine. Let me know if there is any more information that you may require to diagnose the issue.

Thanks for your response.
Odd, my Mac says exactly 36x36 in that same situation. 

I'm afraid it's unlikely anyone will be willing to spend any time investigating such a minor issue especially one that doesn't necessarily reproduce.

Comment 5

3 years ago
I appreciate that it may seem minor, however we are getting quite major clipping appearing on some of our icons in our product and it is only happening on Firefox.

We have tested this on multiple Macs and the same thing is happening on all machines, is there any more information that I could give you that would help to recreate the issue?
Do they have Retina display? (mine doesn't). 

The information you obtain from about:support might be helpful (add it as an attachment if you can as it's quite long).

Comment 7

3 years ago
Hi there, we are using thunderbolt displays (27 inch) which I believe are not retina, however the Macbook Pros do have retina displays. The issue is occurring on both screens.

Furthermore, here is all the information I could find:

  "application": {
    "name": "Firefox",
    "osVersion": "Darwin 15.5.0",
    "arch": "x86-64",
    "version": "47.0",
    "buildID": "20160604131506",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0",
    "safeMode": false,
    "updateChannel": "release",
    "supportURL": "",
    "numTotalWindows": 1,
    "numRemoteWindows": 0,
    "remoteAutoStart": false,
    "autoStartStatus": 2
  "modifiedPreferences": {
    "browser.cache.frecency_experiment": 1,
    "browser.cache.disk.smart_size.first_run": false,
    "browser.cache.disk.capacity": 358400,
    "browser.cache.disk.filesystem_reported": 1,
    "": true,
    "browser.places.smartBookmarksVersion": 7,
    "browser.sessionstore.upgradeBackup.latestBuildID": "20160604131506",
    "browser.startup.homepage_override.buildID": "20160604131506",
    "browser.startup.homepage_override.mstone": "47.0",
    "dom.apps.reset-permissions": true,
    "dom.mozApps.used": true,
    "extensions.lastAppVersion": "47.0",
    "gfx.crash-guard.status.glcontext": 2,
    "gfx.crash-guard.glcontext.deviceID": "0x6821",
    "gfx.crash-guard.glcontext.appVersion": "45.0.1",
    "gfx.blacklist.direct2d": 3,
    "gfx.blacklist.layers.direct3d9": 3,
    "": 1,
    "media.gmp-widevinecdm.lastUpdate": 1465571402,
    "media.gmp-gmpopenh264.version": "1.5.3",
    "media.gmp-gmpopenh264.lastUpdate": 1458038921,
    "media.gmp-gmpopenh264.abi": "x86_64-gcc3-u-i386-x86_64",
    "media.gmp-manager.buildID": "20160604131506",
    "media.gmp-manager.lastCheck": 1466001158,
    "media.gmp-widevinecdm.abi": "x86_64-gcc3-u-i386-x86_64",
    "media.gmp-widevinecdm.version": "",
    "network.cookie.prefsMigrated": true,
    "network.predictor.cleaned-up": true,
    "places.database.lastMaintenance": 1465486012,
    "places.history.expiration.transient_current_max_pages": 104858,
    "plugin.importedState": true,
    "plugin.disable_full_page_plugin_for_types": "application/pdf",
    "privacy.sanitize.migrateFx3Prefs": true,
    "storage.vacuum.last.places.sqlite": 1465486012,
    "storage.vacuum.last.index": 1
  "lockedPreferences": {},
  "javaScript": {
    "incrementalGCEnabled": true
  "accessibility": {
    "isActive": false,
    "forceDisabled": 0
  "libraryVersions": {
    "NSPR": {
      "minVersion": "4.12",
      "version": "4.12"
    "NSS": {
      "minVersion": "3.23 Basic ECC",
      "version": "3.23 Basic ECC"
    "NSSUTIL": {
      "minVersion": "3.23",
      "version": "3.23"
    "NSSSSL": {
      "minVersion": "3.23 Basic ECC",
      "version": "3.23 Basic ECC"
    "NSSSMIME": {
      "minVersion": "3.23 Basic ECC",
      "version": "3.23 Basic ECC"
  "userJS": {
    "exists": false
  "crashes": {
    "submitted": [],
    "pending": 0
  "extensions": [
      "name": "Firefox Hello",
      "version": "1.3.2",
      "isActive": true,
      "id": ""
      "name": "Multi-process staged rollout",
      "version": "1.0",
      "isActive": true,
      "id": ""
      "name": "Pocket",
      "version": "1.0.2",
      "isActive": true,
      "id": ""
  "experiments": [],
  "graphics": {
    "numTotalWindows": 1,
    "numAcceleratedWindows": 1,
    "windowLayerManagerType": "OpenGL",
    "windowLayerManagerRemote": true,
    "supportsHardwareH264": "Yes",
    "adapterDescription": "",
    "adapterVendorID": "0x1002",
    "adapterDeviceID": "0x6821",
    "adapterRAM": "",
    "adapterDrivers": "",
    "driverVersion": "",
    "driverDate": "",
    "webglRenderer": "ATI Technologies Inc. -- AMD Radeon R9 M370X OpenGL Engine",
    "info": {
      "AzureCanvasBackend": "skia",
      "AzureCanvasAccelerated": 1,
      "AzureFallbackCanvasBackend": "none",
      "AzureContentBackend": "quartz"

Comment 8

3 years ago
Apologies I have just realised that you asked for it as an attachment, and I can't edit my post.
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.