@@ -149,6 +149,19 @@ vec3 IPComputeFixedGradientValues(float t, float colors_length) {
   return vec3(lower_index, upper_index, scale);
 }
 
+float IPComputeLinearGradientT(vec2 positon,
+                               vec2 start,
+                               vec2 delta,
+                               float inv_gradient_length) {
+  return dot(positon - start, delta) * inv_gradient_length;
+}
+
+float IPComputeRadialGradientT(vec2 position,
+                               vec2 center,
+                               float inv_gradient_length) {
+  return length(position - center) * inv_gradient_length;
+}
+
 /// Samples a linear gradient from a 1D gradient ramp texture.
 vec4 IPSampleLinearGradient(sampler2D tex,
                             vec2 start_point,
@@ -163,7 +176,8 @@ vec4 IPSampleLinearGradient(sampler2D tex,
 
   float t = start_to_end_squared == 0.0
                 ? 0.0
-                : dot(start_to_position, start_to_end) / start_to_end_squared;
+                : IPComputeLinearGradientT(pos, start_point, start_to_end,
+                                           1.0 / start_to_end_squared);
   return IPSampleLinearWithTileMode(tex, vec2(t, 0.5), half_texel, tile_mode,
                                     decal_border_color);
 }
@@ -176,7 +190,7 @@ vec4 IPSampleRadialGradient(sampler2D tex,
                             vec2 half_texel,
                             float tile_mode,
                             vec4 decal_border_color) {
-  float t = radius == 0.0 ? 0.0 : length(pos - center) / radius;
+  float t = IPComputeRadialGradientT(pos, center, 1.0 / radius);
   return IPSampleLinearWithTileMode(tex, vec2(t, 0.5), half_texel, tile_mode,
                                     decal_border_color);
 }
 
@@ -222,5 +222,21 @@ TEST_P(AiksTest, CanRenderSkewedCircleHairline) {
   ASSERT_TRUE(OpenPlaygroundHere(builder.Build()));
 }
 
+TEST_P(AiksTest, CanRenderSkewedRectHairline) {
+  DisplayListBuilder builder;
+  builder.Scale(GetContentScale().x, GetContentScale().y);
+  builder.DrawColor(DlColor::kBlack(), DlBlendMode::kSrc);
+
+  RenderParameters params{
+      .render_type = RenderType::kRectangle,
+      .center = GetWindowBounds().GetCenter(),
+      .skew_x = 0.75f,
+      .skew_y = 0.5f,
+  };
+  RenderPrimitiveWithStroke(builder, params);
+
+  ASSERT_TRUE(OpenPlaygroundHere(builder.Build()));
+}
+
 }  // namespace testing
 }  // namespace impeller
@@ -930,7 +930,7 @@ bool Canvas::AttemptDrawLineSDF(const Point& p0,
                                 const Paint& paint,
                                 bool reuse_depth) {
   if (!renderer_.GetContext()->GetFlags().use_sdfs ||
-      !IsCompatibleWithSDFRendering(paint)) {
+      !IsCompatibleWithSDFRendering(paint, GetCurrentTransform())) {
     return false;
   }
   // Draw the line as a filled rectangle with width=line_length and
@@ -1069,7 +1069,7 @@ void Canvas::DrawRect(const Rect& rect, const Paint& paint) {
   }
 
   if (renderer_.GetContext()->GetFlags().use_sdfs &&
-      IsCompatibleWithSDFRendering(paint)) {
+      IsCompatibleWithSDFRendering(paint, GetCurrentTransform())) {
     Rect effective_rect = rect;
     Color effective_color = paint.color;
 
@@ -1142,7 +1142,7 @@ void Canvas::DrawOval(const Rect& rect, const Paint& paint) {
   entity.SetBlendMode(paint.blend_mode);
 
   if (renderer_.GetContext()->GetFlags().use_sdfs &&
-      IsCompatibleWithSDFRendering(paint)) {
+      IsCompatibleWithSDFRendering(paint, GetCurrentTransform())) {
     UberSDFParameters params;
 
     if (paint.style == Paint::Style::kStroke) {
@@ -1230,7 +1230,8 @@ void Canvas::DrawRoundRect(const RoundRect& round_rect, const Paint& paint) {
   const RoundingRadii& radii = round_rect.GetRadii();
 
   if (renderer_.GetContext()->GetFlags().use_sdfs &&
-      IsCompatibleWithSDFRendering(paint) && radii.AreAllCornersCircular()) {
+      IsCompatibleWithSDFRendering(paint, GetCurrentTransform()) &&
+      radii.AreAllCornersCircular()) {
     Color effective_color = paint.color;
     Rect bounds = round_rect.GetBounds();
 
@@ -1314,7 +1315,7 @@ void Canvas::DrawRoundSuperellipse(const RoundSuperellipse& round_superellipse,
   entity.SetBlendMode(paint.blend_mode);
 
   if (renderer_.GetContext()->GetFlags().use_sdfs &&
-      IsCompatibleWithSDFRendering(paint)) {
+      IsCompatibleWithSDFRendering(paint, GetCurrentTransform())) {
     // Try to draw using UberSDF.
     auto params = UberSDFParameters::MakeRoundedSuperellipse(
         /*color=*/paint.color, /*round_superellipse=*/round_superellipse,
@@ -1378,7 +1379,7 @@ void Canvas::DrawCircle(const Point& center,
   }
 
   if (renderer_.GetContext()->GetFlags().use_sdfs &&
-      IsCompatibleWithSDFRendering(paint)) {
+      IsCompatibleWithSDFRendering(paint, GetCurrentTransform())) {
     auto params = UberSDFParameters::MakeCircle(
         /*color=*/paint.color, /*center=*/center, /*radius=*/radius,
         /*stroke=*/paint.GetStroke());
@@ -2752,13 +2753,17 @@ void Canvas::EndReplay() {
   Initialize(initial_cull_rect_);
 }
 
-bool Canvas::IsCompatibleWithSDFRendering(const Paint& paint) {
+bool Canvas::IsCompatibleWithSDFRendering(const Paint& paint,
+                                          const Matrix& transform) {
   if (!paint.anti_alias) {
     return false;
   }
   if (paint.mask_blur_descriptor.has_value()) {
     return false;
   }
+  if (transform.HasPerspective()) {
+    return false;
+  }
   switch (paint.blend_mode) {
     // Incompatible blend modes:
     case BlendMode::kClear:
 
@@ -287,8 +287,8 @@ class Canvas {
 
   /// Returns true if the paint is compatible with SDF rendering.
   ///
-  /// Visible for testing.
-  static bool IsCompatibleWithSDFRendering(const Paint& paint);
+  static bool IsCompatibleWithSDFRendering(const Paint& paint,
+                                           const Matrix& transform = Matrix());
 
  private:
   class BlurShape {
 
@@ -71,13 +71,23 @@ SamplerBinding SetupGradientParameters(
     const ContentContext& renderer,
     FS::FragInfo& frag_info) {
   FML_DCHECK(gradient.texture);
-  frag_info.gradient_start = gradient.start;
-  frag_info.gradient_end = gradient.end;
   frag_info.tile_mode = static_cast<Scalar>(gradient.tile_mode);
   auto texture_size = gradient.texture->GetSize();
   FML_DCHECK(!texture_size.IsEmpty());
-  frag_info.half_texel =
-      Point(0.5f, 0.5f) / Point(texture_size.width, texture_size.height);
+  frag_info.half_texel = 0.5f / texture_size.width;
+
+  if (gradient.type == UberSDFParameters::GradientParameters::Type::kLinear) {
+    Point delta = gradient.end - gradient.start;
+    Scalar length_sq = delta.x * delta.x + delta.y * delta.y;
+    frag_info.gradient_coords =
+        Vector4(gradient.start.x, gradient.start.y, delta.x, delta.y);
+    frag_info.inv_gradient_length = length_sq > 0.0f ? 1.0f / length_sq : 0.0f;
+  } else {
+    frag_info.gradient_coords =
+        Vector4(gradient.start.x, gradient.start.y, 0.0f, 0.0f);
+    frag_info.inv_gradient_length =
+        gradient.end.x > 0.0f ? 1.0f / gradient.end.x : 0.0f;
+  }
 
   SamplerDescriptor sampler_desc;
   sampler_desc.min_filter = MinMagFilter::kLinear;
@@ -116,6 +126,8 @@ bool UberSDFContents::Render(const ContentContext& renderer,
       params_.color.WithAlpha(params_.color.alpha * GetOpacityFactor());
   frag_info.center = params_.center;
   frag_info.size = params_.size;
+  Vector2 pixel_size = entity.GetTransform().GetTransformedPixelSize();
+  frag_info.pixel_size = Point(pixel_size.x, pixel_size.y);
   frag_info.stroked = params_.stroke ? 1.0f : 0.0f;
   frag_info.stroke_width = params_.stroke ? params_.stroke->width : 0.0f;
   frag_info.stroke_join =
@@ -126,6 +138,10 @@ bool UberSDFContents::Render(const ContentContext& renderer,
   frag_info.circle_center_top = params_.circle_center_top;
   frag_info.circle_center_right = params_.circle_center_right;
   frag_info.radii = params_.radii;
+  frag_info.gradient_coords = Vector4();
+  frag_info.half_texel = 0.0f;
+  frag_info.tile_mode = 0.0f;
+  frag_info.inv_gradient_length = 0.0f;
 
   SamplerBinding sampler_binding;
   if (params_.gradient) {
 
@@ -117,6 +117,21 @@ TEST(EntityGeometryTest, UberSDFGeometryPaddingIsAdjustedByInverseMaxBasis) {
                                       .TransformAndClipBounds(matrix));
     }
   }
+
+  // Under skew, padding should account for non-orthogonal axis scaling and
+  // determinant.
+  {
+    auto matrix = Matrix::MakeSkew(0.75f, 0.5f);
+    auto coverage = geometry.GetCoverage(matrix);
+    EXPECT_TRUE(coverage.has_value());
+    if (coverage.has_value()) {
+      Vector2 pixel_size = matrix.GetTransformedPixelSize();
+      EXPECT_EQ(coverage.value(),
+                Rect::MakeLTRB(-pixel_size.x, -pixel_size.y,
+                               100.0f + pixel_size.x, 100.0f + pixel_size.y)
+                    .TransformAndClipBounds(matrix));
+    }
+  }
 }
 
 TEST(EntityGeometryTest, FillPathGeometryCoversArea) {
 
@@ -65,16 +65,9 @@ bool UberSDFGeometry::IsAxisAlignedRect() const {
 }
 
 Rect UberSDFGeometry::GetExpandedBounds(const Matrix& transform) const {
-  // Get the scaling factor of the transform in the X and Y directions.
-  Vector2 transform_scaling = transform.GetBasisScaleXY();
-
-  // Get the device pixel size in local space units. This is the inverse of the
-  // transform scaling. E.g. if the transform performs a scale of 4 in the X
-  // direction and 0.5 in the Y direction, then 1 device pixel is size
-  // {0.25, 2.0} in local space units.
-  Size device_pixel_size = {
-      transform_scaling.x != 0 ? 1.0f / transform_scaling.x : 0,
-      transform_scaling.y != 0 ? 1.0f / transform_scaling.y : 0};
+  // Get the device pixel size in local space units.
+  Vector2 pixel_size = transform.GetTransformedPixelSize();
+  Size device_pixel_size(pixel_size.x, pixel_size.y);
 
   // The stroke padding is half the stroke width, if the shape is stroked.
   Size stroke_padding;
 
@@ -5,6 +5,7 @@
 precision mediump float;
 
 #include <impeller/color.glsl>
+#include <impeller/constants.glsl>
 #include <impeller/gradient.glsl>
 #include <impeller/texture.glsl>
 #include <impeller/types.glsl>
@@ -29,6 +30,14 @@ uniform FragInfo {
   /// bottom-right), or the circular cap radii for rounded superellipses in
   /// radii.xy (top octant in x, right octant in y).
   vec4 radii;
+  /// Gradient parameters:
+  ///   - Linear gradient:
+  ///       xy: Start point in local coordinates.
+  ///       zw: Delta vector (end - start) in local coordinates.
+  ///   - Radial gradient:
+  ///       xy: Center point in local coordinates.
+  ///       zw: Unused (0.0).
+  vec4 gradient_coords;
 
   // ===========================================================================
   // vec2 fields
@@ -39,6 +48,8 @@ uniform FragInfo {
   vec2 center;
   /// The half-dimensions of the shape (half-width, half-height).
   vec2 size;
+  /// The size of a device pixel in local coordinates.
+  vec2 pixel_size;
 
   // --- Superellipse Parameters ---
   /// The exponent degree (n_x, n_y) of the superellipse curvature.
@@ -53,17 +64,6 @@ uniform FragInfo {
   /// rounded superellipse.
   vec2 circle_center_right;
 
-  // --- Gradient Parameters ---
-  /// The starting point of a linear gradient, or the center point of a radial
-  /// gradient.
-  vec2 gradient_start;
-  /// The ending point of a linear gradient, or (radius, 0.0) for a radial
-  /// gradient.
-  vec2 gradient_end;
-  /// Half the size of a single gradient texel in normalized texture
-  /// coordinates.
-  vec2 half_texel;
-
   // ===========================================================================
   // float fields
   // ===========================================================================
@@ -102,6 +102,13 @@ uniform FragInfo {
   ///   2: Mirror
   ///   3: Decal
   float tile_mode;
+  /// Half the size of a single gradient texel in normalized texture
+  /// coordinates along the gradient ramp (x axis).
+  float half_texel;
+  /// Inverse gradient length:
+  ///   - Linear gradient: 1.0 / dot(delta, delta)
+  ///   - Radial gradient: 1.0 / radius
+  float inv_gradient_length;
 }
 frag_info;
 
@@ -115,17 +122,20 @@ vec4 getColor() {
   if (frag_info.color_source_type < 0.5) {
     // Solid color
     color = frag_info.color;
-  } else if (frag_info.color_source_type < 1.5) {
-    // Linear gradient
-    vec4 gradient_color = IPSampleLinearGradient(
-        color_source_sampler, frag_info.gradient_start, frag_info.gradient_end,
-        v_position, frag_info.half_texel, frag_info.tile_mode, vec4(0.0));
-    color = vec4(gradient_color.rgb, gradient_color.a * frag_info.color.a);
   } else {
-    // Radial gradient
-    vec4 gradient_color = IPSampleRadialGradient(
-        color_source_sampler, frag_info.gradient_start,
-        frag_info.gradient_end.x, v_position, frag_info.half_texel,
+    float t;
+    if (frag_info.color_source_type < 1.5) {
+      // Linear gradient
+      t = IPComputeLinearGradientT(v_position, frag_info.gradient_coords.xy,
+                                   frag_info.gradient_coords.zw,
+                                   frag_info.inv_gradient_length);
+    } else {
+      // Radial gradient
+      t = IPComputeRadialGradientT(v_position, frag_info.gradient_coords.xy,
+                                   frag_info.inv_gradient_length);
+    }
+    vec4 gradient_color = IPSampleLinearWithTileMode(
+        color_source_sampler, vec2(t, 0.5), vec2(frag_info.half_texel, 0.5),
         frag_info.tile_mode, vec4(0.0));
     color = vec4(gradient_color.rgb, gradient_color.a * frag_info.color.a);
   }
@@ -166,7 +176,7 @@ float distanceFromChamferRect(vec2 p, vec2 half_size, float chamfer_size) {
   p = abs(p);
   float d1 = max(p.x - half_size.x, p.y - half_size.y);
   float d2 =
-      (p.x + p.y - half_size.x - half_size.y + chamfer_size) * 0.70710678;
+      (p.x + p.y - half_size.x - half_size.y + chamfer_size) * kHalfSqrtTwo;
   return max(d1, d2);
 }
 
@@ -215,25 +225,14 @@ float distanceFromRoundedSuperellipse(vec2 p,
                                se_degree);
 }
 
-// Special case pixel size calculation for rectangles. The standard `pixelSize`
-// function uses SDF derivatives, which gives invalid results for very small
-// shapes, where adjacent device pixels span across opposing edges of the shape.
-// This function calculates pixel size for rectangles without using SDF
-// derivatives.
+// Calculates pixel size for rectangles using frag_info.pixel_size.
 float rectPixelSize(vec2 p) {
-  // The change in local coordinates per horizontal device pixel (device_dx)
-  // and vertical device pixel (device_dy).
-  vec2 device_dx = dFdx(v_position);
-  vec2 device_dy = dFdy(v_position);
-  // The size of a device pixel in terms of local coordinates.
-  vec2 device_pixel_size = vec2(length(vec2(device_dx.x, device_dy.x)),
-                                length(vec2(device_dx.y, device_dy.y)));
-
   // Get pixel size in the direction perpendicular to the closest edge of the
-  // rectangle: device_pixel_size.x when closer to a vertical edge, and
-  // pixel_size.y when closer to a horizontal edge.
+  // rectangle: frag_info.pixel_size.x when closer to a vertical edge, and
+  // frag_info.pixel_size.y when closer to a horizontal edge.
   vec2 distance = abs(abs(p) - frag_info.size);
-  return (distance.x < distance.y) ? device_pixel_size.x : device_pixel_size.y;
+  return (distance.x < distance.y) ? frag_info.pixel_size.x
+                                   : frag_info.pixel_size.y;
 }
 
 // Special case pixel size calculation for rounded rectangles, similar to