Bug 152834 - SVG Rectangle strokes thicker than specified, in Safari and Webkit nightly (does not impact simple lines)
Summary: SVG Rectangle strokes thicker than specified, in Safari and Webkit nightly (d...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-01-07 09:54 PST by Andre-John Mas
Modified: 2022-07-15 17:18 PDT (History)
3 users (show)

See Also:


Attachments
test-case (907 bytes, text/html)
2016-01-07 09:54 PST, Andre-John Mas
no flags Details
Screenshot showing what I am seeing (20.57 KB, image/png)
2016-01-10 08:27 PST, Andre-John Mas
no flags Details
second test case (2.45 KB, text/html)
2016-01-10 08:57 PST, Andre-John Mas
no flags Details
third test case (1.94 KB, text/html)
2016-01-11 09:19 PST, Said Abou-Hallawa
no flags Details
Screenshot-MacBookPro11,3 (445.90 KB, image/png)
2016-01-11 11:31 PST, Said Abou-Hallawa
no flags Details
Screenshot-MacPro6,1 (60.61 KB, image/png)
2016-01-11 11:33 PST, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andre-John Mas 2016-01-07 09:54:37 PST
Created attachment 268460 [details]
test-case

When a 'rect' (rectangle) is drawn in SVG I observe the stroke being thicker than specified 'stroke-width' and the equivalent specified value for a 'line'.

This is only an issue in SVG and specifying shape-rendering="crispEdges" does not help.

I have not found any work around and this impacts quality of rendered images.

I have not tested for other stroke scenarios.

SVG Sample
----------

  <!-- Line thickness as expected -->
  <svg id="svg1" style="width: 200px; height: 200px; background: white" shape-rendering="crispEdges">
      <line x1="0" x2="200" y1="20" y2="20" stroke="#000000" style="stroke-width: 1px;"></line>
      <line x1="0" x2="200" y1="40" y2="40" stroke="#000000" style="stroke-width: 2px;"></line>
  </svg>

  <!-- Line thickness does not correspond to simple lines -->
  <svg id="svg2" style="width: 200px; height: 200px; background: white" shape-rendering="crispEdges">
      <rect x="80" y="80" width="40" height="40" stroke="#000000" fill="none" style="stroke-width: 1px;"></rect>
      <rect x="70" y="70" width="60" height="60" stroke="#000000" fill="none" style="stroke-width: 2px;"></rect>
  </svg>

Browsers Tested In
------------------

I observe this behaviour:
  - Webkit nightly 2016-07-01 (MacOS X 10.11)
  - Safari 9.0.2 (MacOS X 10.11)
  - Safari and other webkit based browsers on iOS 9.2

Behaves as expected:
  - Opera 34 (MacOS X 10.11)
  - Google Chrome 43 (MacOS X 10.11)
Comment 1 Andre-John Mas 2016-01-10 08:27:26 PST
Created attachment 268645 [details]
Screenshot showing what I am seeing
Comment 2 Andre-John Mas 2016-01-10 08:57:10 PST
Created attachment 268647 [details]
second test case
Comment 3 Andre-John Mas 2016-01-10 09:16:42 PST
I looked at Chromium build 100008 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/100008/), from September 2011, and the issue does not present itself there. I was looking to establish at what point the behaviour diverged in Google Chrome and Safari, but this offered no clue.
Comment 4 Said Abou-Hallawa 2016-01-11 09:19:07 PST
Created attachment 268690 [details]
third test case
Comment 5 Said Abou-Hallawa 2016-01-11 09:23:14 PST
I can't reproduce this bug in the shipped Safari on Mac OS X El Capitan. The display is identical with Chrome and FireFox on the same machine. I tried the webkit nightly build  and the display is as expected also.
Comment 6 Andre-John Mas 2016-01-11 10:35:10 PST
I certainly see the issue with a 13" MacBook Air (MacBookAir6,2), without extra display and with the iPad Air 1.

I have since tested with other computers:
 - 15" MacBook Pro , late 2008 (MacBookPro5,1), MacOS 10.9.3: looks fine
 - 27" iMac, mid 2011 (iMac 12,2), MacOS 10.11.2: thick line issue
 - Mac mini, early 2009 (Macmini3,1): thick line issue

For the MacOS test, what machine are you using?

Are there any screen metrics available via the DOM, that I could look at to see if there are differences in the indicated screen DPI or something similar? I want to avoid delving into the code if I don't need to, for initial analysis.

Note, I wasn't able to test Webkit nightly with MacOS X 10.9, so I can't tell whether the issue is due to regression or something else.
Comment 7 Andre-John Mas 2016-01-11 11:06:27 PST
Just noticed something on my 13" MacBook Air, when I tested your test case (Safari & Webkit nightly):

a: Looks ok:
  - New tab
  - Paste in and display test case

b: Looks problematic:
  - New tab
  - Open test case page
  - Display web inspector


c: Looks problematic:
  - New tab
  - Visit any website, www.webkit.org
  - Display web inspector
  - Open test case page

Note in cases b & c closing the inspector and reloading the page in the same pane doesn't correct the line thickness.

Further, depending on whether I open your test case from the URL or file, the behaviour is different. From the web site it looks fine (as describe in cases b & c), but is always problematic from file.
Comment 8 Said Abou-Hallawa 2016-01-11 11:28:25 PST
Yes, you are right. It seems to be hardware specific. I can't repro this bug on MacBookPro11,3. But I can repro it on MacPro6.1 only on WK2.
Comment 9 Said Abou-Hallawa 2016-01-11 11:31:16 PST
Created attachment 268699 [details]
Screenshot-MacBookPro11,3
Comment 10 Said Abou-Hallawa 2016-01-11 11:33:28 PST
Created attachment 268700 [details]
Screenshot-MacPro6,1
Comment 11 Brent Fulgham 2022-07-15 17:18:19 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.