1072638 - CSS Rendering: translateX on partial-percentage-point width element leaves gap between border and content

Status: RESOLVED INCOMPLETE

(Core :: Web Painting, defect)

Description

[Brian]

Attachment: firefox-translateX-bug-20140924.jpg

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140917194002

Steps to reproduce:

Reference the following JS Fiddle, which reproduces the issue simply:
http://jsfiddle.net/mb3d6xfr/2/

1. Create an element with a border, background, and partial percentage point width. My original case involved a 5/12 (41.6667%) or 7/12 (58.3333%) width element.

2. Apply a "transform: transformX" CSS rule to the element to shift the element horizontally.

3. Upon rendering the bug may not be immediately noticeable. Slowly drag-to-resize the browser window horizontally, so that the element's physical size changes, until observing that a 1px gap appears between the right side of the element's content/background and its right border.


Actual results:

In Firefox, when the the view renderer leaves a 1px gap is visible between the content of the element and the right border.


Expected results:

There should be no gap; the CSS/View renderer should calculate the correct width of both content borders and display accordingly.

Comment 1

[Loic]

Attachment: 1072638.html

It depends on the size of the window.

Comment 2

[Boris Zbarsky [:bzbarsky]]

If you give the body a width that matches the width of a window that shows the problem, you can presumably reproduce with any window size, right?

I can't reproduce this so far (on Mac, though, and a high-dpi screen).

Comment 3

[Loic]

When I set the window width to the body, for which I observed the issue, the rendering is fine.

Ex:
body: no fixed width, issue observed for window width=566px
body: width set to 566px, issue not visible
I need to decrease and set to 563px to reproduce it with any window size

Comment 4

[Boris Zbarsky [:bzbarsky]]

So I'm not seeing any gaps on attachment 8494931 [details], with body width set to 563px...

It's possible that they don't show up on a high-dpi display.  Or that they're Windows-only.

Comment 5

[Loic]

Boris, you can play with the zoom level in the tab or with the window size to make the gap appear.

Comment 6

[Boris Zbarsky [:bzbarsky]]

No, I actually can't.  I haven't been able to make it appear at all, that's the point.

Comment 7

[Loic]

I can't reproduce it with FF45, I think it has been fixed somewhere in past versions.

Brian, is it fixed for you with the latest release of Firefox?

Comment 8

[Adomas]

Definitely not fixed, at least on Ubuntu, and affects integer percentages too. Updated fiddle http://jsfiddle.net/vx9urtrr/

To see the effect use the middle separator to make the HTML part wider or narrower. You will observe the right border jumping by 1px into the Test Button content-box.

Especially problematic as I am using this exact CSS to center a prompt box without the use of Javascript and it works beautifully in Chrome.

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Closing the bug as incomplete.

For more information, please visit auto_nag documentation.