| CARVIEW |
Select Language
HTTP/2 200
date: Tue, 15 Jul 2025 20:34:21 GMT
content-type: text/html; charset=utf-8
cache-control: max-age=0, private, must-revalidate
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
link: ; rel=preload; as=fetch; crossorigin=use-credentials
referrer-policy: no-referrer-when-downgrade
server-timing: issue_layout-fragment;desc="issue_layout fragment";dur=181.53441,issue_conversation_content-fragment;desc="issue_conversation_content fragment";dur=729.348493,issue_conversation_sidebar-fragment;desc="issue_conversation_sidebar fragment";dur=42.033308,nginx;desc="NGINX";dur=1.264563,glb;desc="GLB";dur=129.247658
strict-transport-security: max-age=31536000; includeSubdomains; preload
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With, Accept,Accept-Encoding, Accept, X-Requested-With
x-content-type-options: nosniff
x-frame-options: deny
x-voltron-version: fd8fbbc
x-xss-protection: 0
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=1RyIFTyYFz70swtMqHtxKqezYexe7L4QvxnHb%2BLQct2JHyo%2BXNwdBJC3x075zNeWUDFrrKNYOtn1wuZhd6mohZxtZDy0hCb8pENaNDNHzzdians5%2FGnURQyBp6L%2FF%2FDydosTlscrMjJvlTWlz0BcWRrx24FbP6WcJvWwecHw0hSPl7%2FkXPa%2FeQ9bhu62qw9kZgY04wWBz2s8VDYgltnPz%2Bsj3KxduaSYjKFr3GU7yftOs8AwFbCvxcmebtqQqTRJRmnDqOBsao%2BR1l%2FCz2pVxA%3D%3D--5a1XjHAgndRju%2FyH--8RTWK4DpFDz3u2ftNMnwiQ%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.940093808.1752611660; Path=/; Domain=github.com; Expires=Wed, 15 Jul 2026 20:34:20 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Wed, 15 Jul 2026 20:34:20 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: C00A:2E6930:132CFC:1886F1:6876BB4C
[css-values] Inconsistent position serialization · Issue #2274 · w3c/csswg-drafts · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 728
Closed
Description
The position spec mentions
The canonical order when serializing is the horizontal component followed by the vertical component.
but does not discuss if the serialization should contain the author's supplied keywords or if they should be converted to equivalent percentages.
The spec also doesn't mention if 'center' should be added or removed when serializing. (Edge and Safari sometimes serialize center center as center.)
Browsers are currently inconsistent with themselves and each other:
| 10% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
10% center | 10% | 10% center | 10% center |
background-position: <bg-position> |
10% center | 10% | 10% center | 10% center |
object-position: <position> |
10% center | 10% 50% | 10% center | 10% center |
perspective-origin: <position> |
10% center | 10% 50% | 10% center | 10% center |
shape-outside: circle(at <position>) |
10% 50% | 10% | 10% | 10% 50% |
| 20% 30px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
20% 30px | 20% 30px | 20% 30px | 20% 30px |
background-position: <bg-position> |
20% 30px | 20% 30px | 20% 30px | 20% 30px |
object-position: <position> |
20% 30px | 20% 30px | 20% 30px | 20% 30px |
perspective-origin: <position> |
20% 30px | 20% 30px | 20% 30px | 20% 30px |
shape-outside: circle(at <position>) |
20% 30px | 20% 30px | 20% 30px | 20% 30px |
| 30px center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
30px center | 30px | 30px center | 30px center |
background-position: <bg-position> |
30px center | 30px | 30px center | 30px center |
object-position: <position> |
30px center | 30px 50% | 30px center | 30px center |
perspective-origin: <position> |
30px center | 30px center | 30px center | 30px center |
shape-outside: circle(at <position>) |
30px 50% | 30px center | 30px center | 30px 50% |
| 40px top | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
40px top | 40px top | 40px top | 40px top |
background-position: <bg-position> |
40px top | 40px top | 40px top | 40px top |
object-position: <position> |
40px top | 40px 0% | 40px top | 40px top |
perspective-origin: <position> |
40px top | 40px top | 40px top | 40px top |
shape-outside: circle(at <position>) |
40px 0% | 40px top | 40px top | 40px 0% |
| bottom 10% right 20% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% |
background-position: <bg-position> |
right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% | right 20% bottom 10% |
object-position: <position> |
right 20% bottom 10% | calc(80%) calc(90%) | right 20% bottom 10% | right 20% bottom 10% |
perspective-origin: <position> |
right 20% bottom 10% | undefined | right 20% bottom 10% | right 20% bottom 10% |
shape-outside: circle(at <position>) |
80% 90% | bottom 10% right 20% | bottom 10% right 20% | 80% 90% |
| bottom right | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
right bottom | right bottom | right bottom | right bottom |
background-position: <bg-position> |
right bottom | right bottom | right bottom | right bottom |
object-position: <position> |
right bottom | 100% 100% | right bottom | right bottom |
perspective-origin: <position> |
right bottom | right bottom | right bottom | right bottom |
shape-outside: circle(at <position>) |
100% 100% | bottom right | bottom right | 100% 100% |
| center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center center | center | center center | center center |
background-position: <bg-position> |
center center | center | center center | center center |
object-position: <position> |
center center | 50% 50% | center center | center |
perspective-origin: <position> |
center center | center 50% | center center | center center |
shape-outside: circle(at <position>) |
50% 50% | center | center | 50% 50% |
| center 50px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center 50px | center 50px | center 50px | center 50px |
background-position: <bg-position> |
center 50px | center 50px | center 50px | center 50px |
object-position: <position> |
center 50px | 50% 50px | center 50px | center 50px |
perspective-origin: <position> |
center 50px | center 50px | center 50px | center 50px |
shape-outside: circle(at <position>) |
50% 50px | center 50px | center 50px | 50% 50px |
| center bottom | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center bottom | bottom | center bottom | center bottom |
background-position: <bg-position> |
center bottom | bottom | center bottom | center bottom |
object-position: <position> |
center bottom | 50% 100% | center bottom | center bottom |
perspective-origin: <position> |
center bottom | center bottom | center bottom | center bottom |
shape-outside: circle(at <position>) |
50% 100% | center bottom | center bottom | 50% 100% |
| center center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center center | center | center center | center center |
background-position: <bg-position> |
center center | center | center center | center center |
object-position: <position> |
center center | 50% 50% | center center | center |
perspective-origin: <position> |
center center | center center | center center | center center |
shape-outside: circle(at <position>) |
50% 50% | center center | center center | 50% 50% |
| center left | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
left center | left | left center | left center |
background-position: <bg-position> |
left center | left | left center | left center |
object-position: <position> |
left center | 0% 50% | left center | left center |
perspective-origin: <position> |
left center | left center | left center | left center |
shape-outside: circle(at <position>) |
0% 50% | center left | center left | 0% 50% |
| left | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
left center | left | left center | left center |
background-position: <bg-position> |
left center | left | left center | left center |
object-position: <position> |
left center | 0% 50% | left center | left center |
perspective-origin: <position> |
left center | left 50% | left center | left center |
shape-outside: circle(at <position>) |
0% 50% | left | left | 0% 50% |
| left bottom | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
left bottom | left bottom | left bottom | left bottom |
background-position: <bg-position> |
left bottom | left bottom | left bottom | left bottom |
object-position: <position> |
left bottom | 0% 100% | left bottom | left bottom |
perspective-origin: <position> |
left bottom | left bottom | left bottom | left bottom |
shape-outside: circle(at <position>) |
0% 100% | left bottom | left bottom | 0% 100% |
| left center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
left center | left | left center | left center |
background-position: <bg-position> |
left center | left | left center | left center |
object-position: <position> |
left center | 0% 50% | left center | left center |
perspective-origin: <position> |
left center | left center | left center | left center |
shape-outside: circle(at <position>) |
0% 50% | left center | left center | 0% 50% |
| right 30% top 60px | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
right 30% top 60px | right 30% top 60px | right 30% top 60px | right 30% top 60px |
background-position: <bg-position> |
right 30% top 60px | right 30% top 60px | right 30% top 60px | right 30% top 60px |
object-position: <position> |
right 30% top 60px | calc(70%) 60px | right 30% top 60px | right 30% top 60px |
perspective-origin: <position> |
right 30% top 60px | undefined | right 30% top 60px | right 30% top 60px |
shape-outside: circle(at <position>) |
70% 60px | right 30% top 60px | right 30% top 60px | 70% 60px |
| right 40% | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
right 40% | right 40% | right 40% | right 40% |
background-position: <bg-position> |
right 40% | right 40% | right 40% | right 40% |
object-position: <position> |
right 40% | 100% 40% | right 40% | right 40% |
perspective-origin: <position> |
right 40% | right 40% | right 40% | right 40% |
shape-outside: circle(at <position>) |
100% 40% | right 40% | right 40% | 100% 40% |
| top | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center top | top | center top | center top |
background-position: <bg-position> |
center top | top | center top | center top |
object-position: <position> |
center top | 50% 0% | center top | center top |
perspective-origin: <position> |
center top | 50% top | center top | center top |
shape-outside: circle(at <position>) |
50% 0% | top | top | 50% 0% |
| top center | Chrome 64 | Edge 16 | Firefox 58 | Safari 11 |
|---|---|---|---|---|
background-image: radial-gradient(at <position>, red, blue) |
center top | top | center top | center top |
background-position: <bg-position> |
center top | top | center top | center top |
object-position: <position> |
center top | 50% 0% | center top | center top |
perspective-origin: <position> |
center top | center top | center top | center top |
shape-outside: circle(at <position>) |
50% 0% | top center | top center | 50% 0% |
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Issue actions
You can’t perform that action at this time.