New issue
Advanced search Search tips

Issue 897909 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

SVG elements with extreme dimensions are misrendered, depending on layout context

Reported by mccall...@gmail.com, Oct 22

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Steps to reproduce the problem:
1. Load the HTML reproducer
2. Perhaps resize the window. If there is no magnification, make sure none of the text wraps.

What is the expected behavior?
The last two SVGs are rendered the same: both should be 4 overlapped triangles.

What went wrong?
The two triangles with the most extreme absolute dimensions are either drawn too small, or truncated, I'm not sure which.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: n/a
OS Version: OS X 10.11.6
Flash Version: 

Firefox has its own problems with this example, but I think it's a separate issue.
 
triangles-in-chrome.html
1.6 KB View Download
Behavior I see locally: Sorry not to include in original bug.
zoom-125.png
63.9 KB View Download
zoom-100.png
58.9 KB View Download
Labels: Needs-Triage-M69
Here's another example which is simpler, and probably the same underlying issue. It does not depend on the surrounding page context the way the first reproducer does. It makes it clear that it's a problem with scaling, rather than truncation: Very large elements with very small scales are undersized. 

- At 33% zoom, scale(5e-8) does not work in this example.
- At 400% zoom, scale(5e-6) starts to fall behind.
circles-bad-scale.html
902 bytes View Download
circles-screenshots.png
105 KB View Download
Status: Available (was: Unconfirmed)
Somewhere in the transformation chain we are losing precision and then compounding it.

To what extent is this a problem for your site? In particular, what generates SVGs with those dimensions?
We would like to use the SVG coordinate space to represent positions in a genome: For humans, there are 3 billion base pairs, and other organisms have more, so that's the kind of scale we would like to work with. The project is http://higlass.io/. Right now almost all of it is based on Canvas, but we would like to add more interactive elements: For instance, an SVG rectangle might overlay some region, and it could respond to mouseclicks.

There is a similar problem in Firefox at the same scale (https://bugzilla.mozilla.org/show_bug.cgi?id=1501345), and I think we'd like to support both browsers. And, even if this did work, we know that we would need to do more than just expose the raw SVG: When the user zooms out, we still want some representation of a region, even if it's now actually smaller than a pixel.

So: Something based on SVGs at this scale would have been a good first step on this project, but we'll need to take a different approach, I think.
Nice to see you're building a genome tool. My partner works on RNA folding structure and I always thought a web-based viz tool would be great.

Sign in to add a comment