Fractional pixel values not calculated correctly
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: tahir, Unassigned)
Details
Attachments
(2 files)
firefox pixel bug.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Steps to reproduce:
If an HTML element (the container) is zoomed in using CSS, and an element inside the container has a border style with fractional pixel size,
Actual results:
the border width is rounded to nearest pixel and then "multiplied" for zooming,
Expected results:
as opposed to "multiplied" then rounded, as would be expected.
In the attached image, the top is Firefox and bottom is Chrome.
|
||
Comment 2•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 3•4 years ago
|
||
Can you attach a test-case that reproduces the issue? I can't repro with something like:
data:text/html,<a href="" style="border: .3px dashed blue">Foo</a>
This demonstrates the problem. It was a while since I created the zooming container so I forgot that in Firefox, zoom property is not supported, so I had to use transform. When I tried it between Firefox and other browsers (Chrome and Edge), I realized that transform does work identically - the border width is "rounded", then multiplied. I guess the remaining questions are, 1) regardless of what the other browsers do, is this behavior with transform up to standard? and 2) is https://bugzilla.mozilla.org/show_bug.cgi?id=390936 going to be implemented?
|
|
||
Comment 5•4 years ago
|
||
Yeah, that is working as expected. Regarding bug 390936, it's hard, see there and https://github.com/w3c/csswg-drafts/issues/5623 for context.
Is there another solution for this? Is it possible to assign fractional border widths and then transform it in a way that multiplies then rounds the widths?
|
|
||
Comment 7•4 years ago
|
||
Use calc() instead of using the non-standard zoom property?
Can you please clarify? Where would I put the calc() value? If not too much to ask, can you modify my attached HTML to make it work the way I'm looking for?
|
|
||
Comment 9•4 years ago
|
||
Something like:
<!doctype html>
<style>
.zoom {
--zoom: 3; /* You can change this to whatever you want */
}
.zoom > div {
border: solid calc(var(--zoom) * 0.4px);
width: calc(var(--zoom) * 30px);
height: calc(var(--zoom) * 30px);
}
</style>
<div id="divContainer" style=" height:100%;" class="zoom">
<div></div>
</div>
|
Reporter | |
Comment 10•4 years ago
|
||
Thank you very much. This can work, however this involves using this calc() syntax for each dimension property for each element. In my website, I'm displaying a document with many types of text labels and fields etc. It would take enormous effort to make this change. Unfortunately, at this point I'm going to have to leave it as is for Firefox users.
Still, thanks again - at least I now have a possible solution.
Description
•