Open
Bug 957998
Opened 11 years ago
Updated 2 years ago
Firefox (OSX only) displays seams between proportionally scaled images
Categories
(Core :: Graphics: ImageLib, defect)
Tracking
()
UNCONFIRMED
People
(Reporter: bugzilla, Unassigned)
References
()
Details
Attachments
(3 files, 1 obsolete file)
Screenshot of the rendering issue
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140106141415
Steps to reproduce:
1. Make sure that you use OSX (Mavericks)
2. Open the minimal attached example in Firefox or alternatively enter "http://dev.lx-s.de/web/fx/" (without "") in your Firefox address bar and press enter
3. Resize the browser and observe the spacing between the images
Actual results:
Firefox renders seams between the images
Expected results:
The images should appear seamless beside each other
|
Reporter | |
Updated•11 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
|
|
Reporter | |
Updated•11 years ago
|
Summary: Firefox on OSX displays seems between equally spaced divs that contain scaled images → Firefox on OSX displays seams between equally spaced divs that contain scaled images
|
|
Reporter | |
Updated•11 years ago
|
OS: Windows 7 → Mac OS X
|
|
Reporter | |
Comment 1•11 years ago
|
||
Neither "Hardware Acceleration" nor "Smooth Scrolling" have any effect on this behaviour.
Seams are display regardless of these settings.
|
|
Reporter | |
Comment 2•11 years ago
|
||
|
|
Reporter | |
Comment 3•11 years ago
|
||
|
|
Reporter | |
Updated•11 years ago
|
|
|
Reporter | |
Updated•11 years ago
|
Component: Layout → Layout: Block and Inline
|
|
Reporter | |
Updated•11 years ago
|
Summary: Firefox on OSX displays seams between equally spaced divs that contain scaled images → Firefox on OSX displays seams between proportionally spaced divs that contain scaled images
|
||
Comment 4•11 years ago
|
||
How do you expect this to behave when the viewport width is not divisible by 4? There's no way to render that without either seams between the blocks or space before/after them....
|
|
Reporter | |
Comment 5•11 years ago
|
||
I was expecting to see a consistent behaviour across platforms (Firefox on Windows displays may example above without any seams) and of course a similar one to other browsers (namely: Safari (OSX), Chrome (Windows and OSX), Internet Explorer (Windows) and as mentioned Firefox (Windows)).
Also, if I modify my example to
<div class="container">
<img src="..."><!-- Insert 4 images total -->
</div>
and give each <img> a width of 25% scaling works perfectly. Only in my above case Firefox produces these seams.
That behaviour seemed like a bug to me, especially since it is inconsistent with Firefox on Windows (not to mention all other major browsers).
|
|
Reporter | |
Comment 6•11 years ago
|
||
(In reply to Alexander Steinhöfer from comment #5)
> Also, if I modify my example to
>
> <div class="container">
> <img src="..."><!-- Insert 4 images total -->
> </div>
>
> and give each <img> a width of 25% scaling works perfectly. Only in my above
> case Firefox produces these seams.
Sorry, that was wrong information. This still gives seams.
If I modify my example, and use divs with a solid background-color, a width of 25% and any height (say: 100px),
then Firefox is able to scale them without any seams (across platforms).
Only when using images Firefox displays this erroneous looking behaviour.
Since my above example still didn't work out, I can reduce my test-case to the following (simpler) markup:
CSS: .tile { display: inline-block; width: 25%; }
HTML:
<body>
<img class="tile" src="tile.png"><!--
--><img class="tile" src="tile.png"><!--
--><img class="tile" src="tile.png"><!--
--><img class="tile" src="tile.png">
</body>
|
|
Reporter | |
Comment 7•11 years ago
|
||
Can also be seen at: http://dev.lx-s.de/web/fx/
|
|
Reporter | |
Comment 8•11 years ago
|
||
Comment on attachment 8357686 [details]
fx-bug.zip
Obsolete.
|
|
Reporter | |
Updated•11 years ago
|
Summary: Firefox on OSX displays seams between proportionally spaced divs that contain scaled images → Firefox (OSX only) displays seams between proportionally scaled images
|
|
Reporter | |
Updated•11 years ago
|
Attachment #8357686 -
Attachment is obsolete: true
|
|
||
Comment 9•11 years ago
|
||
If it's working with solid fill divs, then chances are it's image scaling producing boundary artifacts...
Component: Layout: Block and Inline → ImageLib
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•