Visual artifacts when scrolling DataGrid vertically after a RotateTransform

Question

I used this StackOverflow answer to rotate a DataGrid such that the column headers appear as row headers, and new DataGrid rows would appear as columns (horizontal DataGrid).

In the DataGrid's Style, I have a ControlTemplate that consists of a ScrollContentPresenter and two ScrollBars (vertical and horizontal). CanContentScroll is set to "true" for the ScrollContentPresenter so that the cells will scroll logically rather than physically. An excerpt from this ControlTemplate is shown below:

    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                        CanContentScroll="{TemplateBinding CanContentScroll}"
                        CanHorizontallyScroll="False"
                        Grid.ColumnSpan="2"
                        CanVerticallyScroll="False"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        ContentStringFormat="{TemplateBinding ContentStringFormat}"
                        Grid.Row="1" />
    <ScrollBar x:Name="PART_VerticalScrollBar"
            Grid.Column="2"
            Grid.RowSpan="3"
            Maximum="{TemplateBinding ScrollableHeight}"
            Orientation="Vertical"
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
            ViewportSize="{TemplateBinding ViewportHeight}" />

            [... some code omitted ...]

    <ScrollBar x:Name="PART_HorizontalScrollBar"
                Grid.Column="1"
                Maximum="{TemplateBinding ScrollableWidth}"
                Orientation="Horizontal"
                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                ViewportSize="{TemplateBinding ViewportWidth}" />

The horizontal scrolling for this grid works as expected. However, the vertical scrolling still happens physically, and there are some strange visual artifacts that occur on the top row of cells as they are scrolled off-screen (or back on screen). Screenshots of the artifacts here.

As I scroll down, the content of the cell (TextBlock) disappears right as the top of cell moves offscreen. As I continue to scroll vertically across the cell, the background color "wipes away" horizontally.

Here are the transforms I'm applying to the grid:

Style applied to DataGridCells:

 <TransformGroup>
    <RotateTransform Angle="-90" />
    <ScaleTransform ScaleX="1" ScaleY="-1" />
 </TransformGroup>

Style applied to column header:

    <TransformGroup>
       <RotateTransform Angle="90" />
       <MatrixTransform Matrix="-1, 0, 0, 1, 0, 0" />
    </TransformGroup>

Style applied to DataGrid:

<TransformGroup>
   <RotateTransform Angle="90" />
   <MatrixTransform Matrix="-1, 0, 0, 1, 0, 0" />
</TransformGroup>

There are all LayoutTransforms, not RenderTransforms. It seems like the Transforms are affecting the computed DisplayHeight of the cells during scrolling and causing them to "disappear" before they are truly offscreen. (side note: Logical scrolling (CanContentScroll = true) disables virtualization of DataGridCells).

My goal is to eliminate the vertical scrolling artifacts, either by scrolling logically or correcting the rendering issues (preferred).

Edit: My question is the following: How can I eliminate these visual artifacts due to scrolling a rotated datagrid?