SVG Path Element Width Calculated Incorrectly

UNCONFIRMED
Unassigned

Status

()

Product:
Core
Component:
SVG
Importance:
P3
normal
Status:
UNCONFIRMED
Reported:
3 years ago
Modified:
2 years ago

People

(Reporter: connorwyatt1, Unassigned)

Tracking

Version:
47 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

Screenshot showing the box model
533.88 KB, image/png
Details
(Reporter)

Description

•
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.

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.

Updated

•
3 years ago
Component: Untriaged → SVG
Product: Firefox → Core

Comment 1

•
3 years ago 
The path's getBBox() width is exactly 36 for me.

Comment 2

•
3 years ago 
and I'm on a Mac too.
 (Reporter)

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.

Comment 4

•
3 years ago 
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.
 (Reporter)

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?

Comment 6

•
3 years ago 
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).
 (Reporter)

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": "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": "loop@mozilla.org"
    },
    {
      "name": "Multi-process staged rollout",
      "version": "1.0",
      "isActive": true,
      "id": "e10srollout@mozilla.org"
    },
    {
      "name": "Pocket",
      "version": "1.0.2",
      "isActive": true,
      "id": "firefox@getpocket.com"
    }
  ],
  "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"
    }
  }
}
 (Reporter)

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.