[csswg-drafts] [css-view-transitions] 1px wrong offset. Depends on odd/even pixel width container (#9802)

HarijsR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions] 1px wrong offset. Depends on odd/even pixel width container ==
This (1px offset) behavior becomes readily apparent when observing view-transition elements that move strictly vertically, either upwards or downwards. And offset to the right is visually somewhere between 0.5-1.0px (see 2 attached images: 1st before view-transition, and 2nd is last frame during transition animation).

"If a container's width is an odd number of pixels, but the content/view-transition-element inside is designed to align on an even pixel grid, it can result in a 1px offset." (50/50 depending on container size). Here is an extremely simplified example for reference:
- Browser zoom 100%
- Browser/html with a width 1200px
- div {width: 1000px; margin: 0 auto; }
- and inside is div {view-transition-name: will-anim-up-down} -- Actually, in my case I animate list-items inside UL container, and layout is far more complex.
- now change browser width to 1201px and observe the bug. The offset is consistently observable throughout the entire duration of the view-transtition. If 1px bug exists, text looks blurry and is 1px too much to the right. If no offset bug, then everything is 100% perfect and seamless, and awesome.

Tested on Google Chrome. 100% reproducible:
- 120.0.6099.217 (Official Build) (64-bit)
- 122.0.6251.0 (Official Build) canary (64-bit)


P.S. Issue "kinda similar" to old IE 1px bug:
 - https://stackoverflow.com/questions/6259072/ie9-rendering-sprite-hover-image-1px-off-blurred
 - https://stackoverflow.com/questions/14030693/ie9-8-7-css-sprite-position-slip-issue

---
Before transitition:
![vt-1](https://github.com/w3c/csswg-drafts/assets/25611891/01e97fb7-7ac0-48d3-872e-cf2fa53e6cc4)

During transition:
![vt-2](https://github.com/w3c/csswg-drafts/assets/25611891/1845aab9-31e8-4966-b42d-e16e7ed3b764)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9802 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 16 January 2024 11:13:50 UTC