Open Bug 516793 Opened 15 years ago Updated 2 years ago

Rendering artifact -moz-border-image, with transparency.

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Platform:
x86
macOS
Type:
defect

Tracking

()

People

(Reporter: Peter.B.G.Mayo, Unassigned)

References

(
URL
)

Details

Attachments

(9 files)

test case from comment 0
2.17 KB, text/html
Details
Screenshot of the bad render.
15.82 KB, image/png
Details
Screenshot of the expected render (more or less).
11.04 KB, image/png
Details
Bad render with nightly minefield.
43.98 KB, image/png
Details
complete html page showing bad glitches
2.51 KB, text/html
Details
html page with glitch before click
360.96 KB, image/png
Details
html page with glitch after click
393.07 KB, image/png
Details
Border Image Transparency Issue (showing)
592.27 KB, image/png
Details
Border Image Transparency Issue (not showing)
595.61 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 GTB6
Build Identifier: 3.7a1pre.en_US.Mac...

Using a -moz-border-image CSS property to specify a button-like look with transparency at the corners/edges causes some of the instances on a page to render with a 1 pixel gap of background/underneath color on the right edge, sometimes only at the corners.

Reproducible: Always

Steps to Reproduce:
<html>
<style>
.in {
  margin: 20px;
  padding: 2px 4px;
  border-width: 3px;
  color: white;
}
.border {
  -moz-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAAXNSR0IArs4c6QAAACZJREFUCNdj9lRRYTBXMmfgYmYwV1JlEL0t/I/ZnIHrtvA/1dsfAE5rB9HD6WWsAAAAAElFTkSuQmCC') 1 1 1 1;
}
.button {
  -moz-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAG9JREFUCNdtjiEOQjEQRF8JCbqprxrUcpE9MSep2ir8z9dViymCwDOTeWaGzCQzMQisxU4MuAI8SokuaXDSJRgzunQvBtElPW8nH3xVXnPOgrUAxC/zYuPAV/2yvio2Dtjj4VJiLV3K3cEAl/6+fQOKESyGUtD6QgAAAABJRU5ErkJggg==') 3 3 3 3;
}

.over { margin: 20px; padding: 10px 0px; }
.blue { background: #abf; }
.green { background: #afa; }

body { 
  background-color:#dde; 
  line-height: 40px; 
}
</style>
<head>
</head>
<body>
Do you see artifacts on the second row, spans 2 and 6?
<hr>
<span class="in border">contents</span>
<span class="over blue"><span class="in border">contents</span></span>
<span class="over green"><span class="in border">contents</span></span>
<span class="over blue"><span class="in border">contents</span></span>
<span class="over green"><span class="in border">contents</span></span>

<span class="over blue"><span class="in border">contents</span></span>
<hr>
<span class="in button">contents</span>
<span class="over blue"><span class="in button">contents</span></span>
<span class="over green"><span class="in button">contents</span></span>
<span class="over blue"><span class="in button">contents</span></span>
<span class="over green"><span class="in button">contents</span></span>
<span class="over blue"><span class="in button">contents</span></span>
</body>
</html>

Actual Results:  
One pixel glitch - I don't see how to attach a snapshot of the bad render here.

Expected Results:  
Smooth flow around button.  

Use webkit, nightly or safari, to render the same page (with -moz- changed to -webkit-) to see an almost identical page without the glitches.
Can you attach a screenshot of what you see, using the 'Add an attachment' link ?
I don't see anything wrong on my side, with the latest nightly build

    
    

    
  


  
This was generated using webkit after an s/-moz-/-webkit-/ on the border property.

    
    

    
  


  
Includes the about message for yesterday's nightly.

    
    

    
  
That seems very dependent on the font used. With my default set-up, which uses a sans-serif font, I can't reproduce the issue. If I switch to use 'Times' (the default serif font), I can see the gap, at _some_ font-sizes only.

Confirming as I don't see any obvious dupe.
Status: UNCONFIRMED → NEW
Component: General → Layout: View Rendering
Ever confirmed: true
QA Contact: general → layout.view-rendering

    
    

    
  
With the tests i have done, it has something to do with the x and y position of the element ... and the page height and the size of viewport.

This is annoying..

Here's a jsbin example of the problem, http://jsbin.com/ikura hope it will help resolve !

i'm on FF 3.6.3 Mac, there's no problem on the PC

    
    

    
  
Also my border image doesn't use transparency, i tried with a transparent and non transparent image and i get the same results

    
    

    
  


  
This is based on a variable sized box (with size 33%) note that when I drag the window (thus changing the size of the border) it gets to places where the image does not have the transparency issue.

    
    

    
  


  
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

This image is where I moved the window in Comment #12. The transparency doesn't show in this screenshot, but it goes through different levels of showing.

Note that this is an issue on the Mac rendering engine, this bug does not appear in the similar Windows version.

    
    

    
  
Can we get a status update on this bug please?

    
    

    
  
This bug is also true for the non-prefixed version of border-image that Firefox began supporting in version 15.

Last tested in Firefox 17.
Component: Layout: View Rendering → Layout: Web Painting

    
  
Severity: normal → S3

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: