Closed Bug 431994 Opened 16 years ago Closed 16 years ago

SVG content renders incorrectly when vertical scrollbar is present on page

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Platform:
x86
Windows Vista
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: martin.booth, Unassigned)

Details

Attachments

(1 file)

test case to demonstrate bug
597 bytes, application/xhtml+xml
Details 
User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; InfoPath.2; .NET CLR 3.5.21022)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9b5) Gecko/2008032620 Firefox/3.0b5

When there is a vertical scroll bar present on a webpage, and there is svg content embedded within the webpage, the SVG content renders at slightly the wrong width (at least that is how it appears). The SVG element has a fixed width, as does its containing width in the example I have attached. In addition to the content being rendered slightly incorrectly, it is rendered _much_ slower when there is a scroll bar present. I believe it must be going through some steps to resize it which slows things down.

Reproducible: Always

Steps to Reproduce:
1. Create a file with extension .xhtml containing this:

<html xmlns="http://www.w3.org/1999/xhtml">
<body id="body"><div style="margin:0px auto;width:500px;height:500px">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice"
    style="width:500px; height:500px;">
    <rect x="0" y="0" width="250" height="250" style="fill:red" />
    <rect x="250" y="0" width="250" height="250" style="fill:green" />
    <rect x="250" y="250" width="250" height="250" style="fill:blue" />
    <rect x="0" y="250" width="250" height="250" style="fill:yellow" />
  </svg></div>
</body>
</html>

Examine the image (specifically the border between the red/green squares and the border between the yellow/blue squares) with the window maximised so there is no vertical scrollbar. Then resize the window such that a vertical scroll bar appears.
Actual Results:  
The boxes are overlapped/blured when the vertical scroll bar is present, but renderes perfectly when the scroll bar is not present. It also renders much more slowly

Expected Results:  
The image should render exactly the same way with or without a vertical scrollbar. It should render the way it renders without a vertical scrollbar
Component: General → SVG
Product: Firefox → Core
QA Contact: general → general

    
    

    
  
Seems fine to me. I see no blur/overlap or slowness.

Try again with the latest trunk perhaps.

    
    

    
  
I have looked into the issue further and realised that it is not confined to the situation I described; and it may not be a bug after all anyway, but I will explain it further and you can decide.
When the firefox browser is maximised on most resolutions, the body area width will normally be an even number of pixels. (resolutions are usually even). When a scroll bar is present the body width is an odd number of pixels. (I think the scroll bar is 17 pixels wide).
The issue I am seeing is down to trying to horizontally center the SVG element, which is an even number of pixels, in the body element when it is an odd number of pixels wide. This will cause the x offset of the svg element to be halfway between 2 pixels. The blur you should see in the example I attached will be due to antialiasing; and the slowdown probably the same (you can't see the slow down in my example, it is more evident when animating svg)

So mathematically, i think what is happening makes sense; it is however inconsistant with Safari and Opera, and I personally don't think its consistant with the rest of firefox where it is not possible to position elements between pixels.

Please examine the file I attached closely (specifically right in the middle of the element) rendered with the browser at odd and even widths.

I can reproduce this bug (or is it?) at home and at work (that is on windows xp, and windows vista). I can also reproduce it with the nightly build i downloaded last night

Regards

Martin

    
    

    
  
That's antialiasing at work for you. If you don't want it then you need shape-rendering="crispEdges" 
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → INVALID

    
    

    
  
Thanks for your comment; I am sure it is the anti aliasing which is causing it. I cannot get the svg to render correctly by enabling this on the svg element though. For a start, I don't want anti aliasing disabled, secondly even with this setting enabled it is definitely not rendering as it should still.

I have resolved the problem by guaranteeing the containing element is always an even number of pixels usign javascript to add or remove a 1 pixel border.

I will point you to the svg application (as opposed to my test page) when it is released if you wouldn't mind just double checking that there is nothing wrong. This will be in a weeks time

Regards

Martin

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: