-
Notifications
You must be signed in to change notification settings - Fork 707
with the background-position property, where is the 50% position decision? #7982
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
These subpixel things are not currently specified. See #5210 for an attempt to specify how border widths are rounded. |
but there is no "border" in my problem, it's about the position |
@letochagone I think Oriol was just trying to give you an example of where we tried to specify it. But as he mentions, the specifics of pixel rounding aren't specified in the spec, so what the exact effect of the rounding is depends on the layout engine. |
CSS does not specify how to round these subpixel values at the moment. I will try to go through the computation of background-position in your example, if that helps: Used valuesIn your example, you have the following background-position: 50% 50%;
background-size: 4px 6px;
width: 9px;
height: 10px; When background position is specified in percentages, this is calculated as a percentage of the remaining space in the element (width of background positioning area - width of background image). This is specified in CSS Backgrounds and Borders Module Level 3 :
Your remaining horizontal space is This should give the same result as if you had specified: background-position: 2.5px 2px; These are your used values. Actual valuesYour browser (or user agent, as it is called in the specs) might not be able to use these values directly. CSS Cascading and Inheritance specifies the actual values:
The specification has many examples of value computations. CSS Values and Units also specifies that the browser has to approximate the values.
Your question
"The documents" specify that it is up to the browser to round these numbers. I have tried to provide links to where in the documents in the text above. |
in the following example an image created with background-image has an even width (4 pixels) .
It is placed in the middle (50%) of the div element containing it. This element has an odd size (9pixels).
result: the image has 3 pixels to its left and 2 to its right.
it could have been 2 pixels to its left and 3 to its right.
My question is not why. My question is where are the documents that specify this type of CSS decision?
The text was updated successfully, but these errors were encountered: