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

NEW
Unassigned

Status

()

Core
Layout: View Rendering
9 years ago
6 years ago

People

(Reporter: Peter Mayo, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(9 attachments)

(Reporter)

Description

9 years ago
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.

Comment 1

9 years ago
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

Comment 2

9 years ago
Created attachment 400903 [details]
test case from comment 0
(Reporter)

Comment 3

9 years ago
Created attachment 400992 [details]
Screenshot of the bad render.
(Reporter)

Comment 4

9 years ago
Created attachment 400998 [details]
Screenshot of the expected render (more or less).

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

Comment 5

9 years ago
Created attachment 401001 [details]
Bad render with nightly minefield.

Includes the about message for yesterday's nightly.

Comment 6

9 years ago
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

Comment 7

8 years ago
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

Comment 8

8 years ago
Created attachment 446061 [details]
complete html page showing bad glitches

Comment 9

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

Comment 10

8 years ago
Created attachment 446065 [details]
html page with glitch before click

Comment 11

8 years ago
Created attachment 446067 [details]
html page with glitch after click

Comment 12

8 years ago
Created attachment 449476 [details]
Border Image Transparency Issue (showing)

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.

Comment 13

8 years ago
Created attachment 449477 [details]
Border Image Transparency Issue (not showing)

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.

Comment 14

7 years ago
Can we get a status update on this bug please?

Comment 15

6 years ago
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.
You need to log in before you can comment on or make changes to this bug.