eliminate wobble in sticky scroll header

Question

When using the composition api to fix an element within a scrollviewer there seems to be layout rounding going on that creates a wobble on a whole visual.

While the following is not my code you can see a similar effect here (look at the "Sticky Header" once sticky. continued scrolling moves it up and down slightly. This is best seen when looking at the horizontal bar of the "H"): (taken from http://meanme.com/2017/07/11/sticky-header/)

with relevant code being similar to this:

CompositionPropertySet scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MainScrollViewer);
var offsetExpression = compositor.CreateExpressionAnimation($"-scroller.Translation.Y");
offsetExpression.SetReferenceParameter("scroller", scrollerPropertySet);
headerVisual.StartAnimation("Offset.Y", offsetExpression);

how can I eliminate that wobble?

Answer 1

If you check the layout guidelines you can find the following:

If you do use measurement values, all dimensions, margins, and padding should be in increments of 4 epx. When UWP uses effective pixels and scaling to make your app legible on all devices and screen sizes, it scales UI elements by multiples of 4. Using values in increments of 4 results in the best rendering by aligning with whole pixels.

Implication of this, that to avoid such rendering issues, you should always use multiples of four for all measurements. In the linked sample code the author uses value of 50 epx for the visible height of the header. This number is not divisible by four, which is the likely cause of the wobbling you are seeing, if your screen uses a scaling ratio other than 100%.

To fix this, try to make the height of the header 52 or 48 epx. That should prevent this from occurring.