1279532 - SVG Path Element Width Calculated Incorrectly

Status: RESOLVED INCOMPLETE

(Core :: SVG, defect, P3)

Description

[connorwyatt1]

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.

https://plnkr.co/edit/DnExWYf0b3bARpJn51g5



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.

Comment 1

[Robert Longson [:longsonr]]

The path's getBBox() width is exactly 36 for me.

Comment 2

[Robert Longson [:longsonr]]

and I'm on a Mac too.

Comment 3

[connorwyatt1]

Attachment: 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.

Comment 4

[Robert Longson [:longsonr]]

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

[connorwyatt1]

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?

Comment 6

[Robert Longson [:longsonr]]

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

[connorwyatt1]

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": "https://support.mozilla.org/1/firefox/47.0/Darwin/en-US/",
    "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,
    "browser.download.importedFromSqlite": 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,
    "media.gmp.storage.version.observed": 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": "1.4.8.866",
    "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": "[e-mail]"
    },
    {
      "name": "Multi-process staged rollout",
      "version": "1.0",
      "isActive": true,
      "id": "[e-mail]"
    },
    {
      "name": "Pocket",
      "version": "1.0.2",
      "isActive": true,
      "id": "[e-mail]"
    }
  ],
  "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

[connorwyatt1]

Apologies I have just realised that you asked for it as an attachment, and I can't edit my post.

Comment 9

[Robert Longson [:longsonr]]

the testcase is gone now.