Closed Bug 410959 Opened 17 years ago Closed 7 years ago

[BC] Table cell border widths render incorrectly at various zoom levels

Categories

(Core :: Layout: Tables, defect, P3)

defect

Tracking

()

RESOLVED FIXED

People

(Reporter: chris.roat, Assigned: ywu)

References

Details

Attachments

(2 files)

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9b2) Gecko/2007121014 Firefox/3.0b2
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9b2) Gecko/2007121014 Firefox/3.0b2

When rendering tables, the width of the cell borders looks OK at the default zoom, but there seems to be an aliasing issue at other zoom levels.  Zooming in/out can cause borders that should be the same width appear different widths... including having thin borders disappear completely.


Reproducible: Always

Steps to Reproduce:
1. Save the xhtml below as a file.
2. Fire up FF beta2 (found on both OSX/Leopard and Ubuntu) and open the file.
3. Zoom in or out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Firefox 3 Beta 2 Render Problem When Zooming</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
  background: #FFFFFF;
}
table {
  background: #00CCFF;
  border-collapse: collapse;
}
table td {
  border-color: #666600;
  border-style: solid;
  border-width: 0 0 0.5 0;
}
</style>
</head>
<body>
<table>
<tr><td>The quick brown fox</td></tr>
<tr><td>The quick brown fox</td></tr>
<tr><td>The quick brown fox</td></tr>
</table>
</body>
</html>

Actual Results:  
The yellow borders appear different widths at various zoom levels - some borders disappearing from view when zooming out.

Expected Results:  
Borders should appear the same width at each zoom level.
In Firefox 3 (3.0.4 on a Mac and 3.0.2 on Linux), for a table with 1px border similar to your example, I observed that when zooming out various segments of the borders both between cells and table border itself would disappear. The same table rendered correctly in Firefox 2. As I researched this problem I ran across a posting on another site that mentioned there is an option to "Zoom Text Only". 

When this feature is enabled, the table is rendered correctly. Try it for your example. I believe this is what you are looking for.

I would recommend that Firefox enable this option by default and let the user choose to zoom everything by disabling the option. This would provide consistent behavior between FF2 and FF3.
Attached file testcase
Might be related to bug 477157.
Status: UNCONFIRMED → NEW
Component: General → Layout
Depends on: 477157
Ever confirmed: true
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → layout
Hardware: PowerPC → All
Version: unspecified → Trunk
I think this would be layout: tables...
Component: Layout → Layout: Tables
QA Contact: layout → layout.tables
Summary: Table cell border widths render incorrectly at various zoom levels → [BC] Table cell border widths render incorrectly at various zoom levels
Bump. I have a number of users annoyed about this as well. Firefox 3.6 on Windows XP SP3.

The bug has also been confirmed on Ubuntu 9.10 and 10.4 - https://bugs.launchpad.net/firefox/+bug/519928
Still broken with FF 7.
Bug still in FF 8 : Mozilla/5.0 (Windows NT 5.1; rv:8.0) Gecko/20100101 Firefox/8.0

For example use http://www.somacon.com/p141.php, leave all defaults except set border-collapse to "collapse", then press ctrl-minus, note that the bottom table border disappears. Press ctrl-minus again, now the top and right borders are missing.
Are there any known work-arounds? Zooming is more common than ever, especially now that high(ish)-DPI monitors are finally entering the PC market. Even IE11 does this correctly.
2014 and this is still an issue? Wow.
I'm using the zoom-feature to fix Wikipedia's awful new font-style, and now all tables on WP have missing lines. Of course, Cr and IE don't have this issue.
Trying with the testcase of comment 2, the regression-range for disappearing lines when zooming out (smaller) is

good
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007/10/2007-10-25-04-trunk/firefox-3.0a9pre.en-US.win32.zip

bad
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007/10/2007-10-26-05-trunk/firefox-3.0a9pre.en-US.win32.zip 

http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=all&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=explicit&mindate=2007-10-24-01&maxdate=2007-10-26-06&cvsroot=%2Fcvsroot

Probably
Bug 389628 - "Implement UI for full page zoom" [p=dao r=mconnor r+sr=sicking (for content/events/) a=blocking-firefox3+ for M9] 

===

And the range for disappearing lines when zooming in (bigger) is

Last good revision: a131999fa900 (2008-10-31)
First bad revision: 4f1383af8f10 (2008-11-01)
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=a131999fa900&tochange=4f1383af8f10
This appears to still be an issue. Very annoying not being able to zoom out without rendering the page incorrectly.
Is this bug ever going to be fixed? You know it's bad when IE can avoid this.
Firefox 47 - Windows 10

Now firefox depends of Windows display property, Great.

This property default value is 125% on Windows 10 (at least on 1920x1080).
So if you are using firefox, 100% zoom in firefox = 125% for all websites.
If you have html tables in an app/website, sometimes border disappear, sometimes it's normal, sometimes it's thicker. And you know what ? If you scroll, border width will change dynamically !

This bug has been reported in 2008. eight years ago.
Firefox 50.0.2 Windows 7

Button element with a solid border (color or transparent) comprised of a gradient background such as "background: -moz-linear-gradient(top, #333"  #000)" will display borders that are colored opposite the start/end color of adjacent button gradient, at any browser zoom factor.

Button element with no borders (none) or with borders of 0px width do not display the above-mentioned defects where gradients are used.
Well, since the Firefox official won't fix it, I do a workaround:
Write this in your user styles:

```css
@-moz-document url-prefix() { /* Firefox only */
	table {
		border-collapse: separate !important;
		border-spacing: 0px;
	}
	tr:not(:last-child) th, tr:not(:last-child) td {
		border-bottom-width: 0 !important;
	}
	th:not(:last-child), td:not(:last-child) {
		border-right-width: 0 !important;
	}
}
```

Preview:
https://cloud.githubusercontent.com/assets/15178410/25564849/9667959e-2dee-11e7-95c9-c3083719b7e5.png
looking into this.
Assignee: nobody → ywu
Can confirm bug still exists.  Firefox 55.

Can happen on any size of border at any zoom, text size. Incosistent thickness on different lines even though they are set to the same thickness.
  
table{
	border-collapse: collapse;
}
td{
border: 1px solid black;
	width: 1em;
	height: 1em;
}
it was reported many times ..
when zooming, size needs to be recalculated so i guess that if let's say 19px grow into 20.9px, this would be 21px .. but then something (else) won't fit anymore ..

i dont't know how this is done but i think the resizing algorithm should be analyzed ..
fixing this could trigger other issues (i guess)..
Status: NEW → ASSIGNED
Priority: -- → P3
I tested the cases above and I think this bug should be fixed by Bug 895096 and I am about to Bug 895096.
s/I am about to/I am about to land
This bug should be fixed by Bug 895096.
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: