diff --git a/servo/resources/shaders/prim_shared.glsl b/servo/resources/shaders/prim_shared.glsl
index ad2ab82e94bc..1ce39e10e0e8 100644
--- a/servo/resources/shaders/prim_shared.glsl
+++ b/servo/resources/shaders/prim_shared.glsl
@@ -218,18 +218,19 @@ void do_clip(vec2 pos, vec4 clip_rect, vec4 radius) {
     }
 }
 
-bool point_in_rect(vec2 p, vec2 p0, vec2 p1) {
-    return p.x >= p0.x &&
-           p.y >= p0.y &&
-           p.x <= p1.x &&
-           p.y <= p1.y;
+float squared_distance_from_rect(vec2 p, vec2 origin, vec2 size) {
+    vec2 clamped = clamp(p, origin, origin + size);
+    return distance(clamped, p);
 }
 
-vec2 init_transform_fs(vec3 local_pos, vec4 local_rect) {
+vec2 init_transform_fs(vec3 local_pos, vec4 local_rect, out float fragment_alpha) {
+    fragment_alpha = 1.0;
     vec2 pos = local_pos.xy / local_pos.z;
 
-    if (!point_in_rect(pos, local_rect.xy, local_rect.xy + local_rect.zw)) {
-        discard;
+    float squared_distance = squared_distance_from_rect(pos, local_rect.xy, local_rect.zw);
+    if (squared_distance != 0) {
+        float delta = length(fwidth(local_pos.xy));
+        fragment_alpha = smoothstep(1.0, 0.0, squared_distance / delta * 2);
     }
 
     return pos;
diff --git a/servo/resources/shaders/ps_image.fs.glsl b/servo/resources/shaders/ps_image.fs.glsl
index a7d96850057d..ae96e1e6ca98 100644
--- a/servo/resources/shaders/ps_image.fs.glsl
+++ b/servo/resources/shaders/ps_image.fs.glsl
@@ -1,8 +1,21 @@
+#line 1
+
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 void main(void) {
-    vec2 st = vTextureOffset + vTextureSize * fract(vUv);
+#ifdef WR_FEATURE_TRANSFORM
+    float alpha = 0;
+    vec2 pos = init_transform_fs(vLocalPos, vLocalRect, alpha);
+    vec2 uv = (pos - vLocalRect.xy) / vStretchSize;
+#else
+    vec2 uv = vUv;
+#endif
+    vec2 st = vTextureOffset + vTextureSize * fract(uv);
+#ifdef WR_FEATURE_TRANSFORM
+    oFragColor = vec4(1, 1, 1, alpha) * texture(sDiffuse, st);
+#else
     oFragColor = texture(sDiffuse, st);
+#endif
 }
diff --git a/servo/resources/shaders/ps_image.glsl b/servo/resources/shaders/ps_image.glsl
index e2c59d9ff69c..b89a421789bc 100644
--- a/servo/resources/shaders/ps_image.glsl
+++ b/servo/resources/shaders/ps_image.glsl
@@ -2,6 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-varying vec2 vUv;                 // Location within the CSS box to draw.
 flat varying vec2 vTextureOffset; // Offset of this image into the texture atlas.
 flat varying vec2 vTextureSize;   // Size of the image in the texture atlas.
+
+#ifdef WR_FEATURE_TRANSFORM
+varying vec3 vLocalPos;
+flat varying vec4 vLocalRect;
+flat varying vec2 vStretchSize;
+#else
+varying vec2 vUv;                 // Location within the CSS box to draw.
+#endif
diff --git a/servo/resources/shaders/ps_image.vs.glsl b/servo/resources/shaders/ps_image.vs.glsl
index 0f6bcba6eba8..61557dcb31c9 100644
--- a/servo/resources/shaders/ps_image.vs.glsl
+++ b/servo/resources/shaders/ps_image.vs.glsl
@@ -15,10 +15,18 @@ layout(std140) uniform Items {
 
 void main(void) {
     Image image = images[gl_InstanceID];
+
+#ifdef WR_FEATURE_TRANSFORM
+    TransformVertexInfo vi = write_transform_vertex(image.info);
+    vLocalRect = image.info.local_rect;
+    vLocalPos = vi.local_pos;
+    vStretchSize = image.stretch_size.xy;
+#else
     VertexInfo vi = write_vertex(image.info);
+    vUv = (vi.local_clamped_pos - vi.local_rect.p0) / image.stretch_size.xy;
+#endif
 
     // vUv will contain how many times this image has wrapped around the image size.
-    vUv = (vi.local_clamped_pos - vi.local_rect.p0) / image.stretch_size.xy;
     vTextureSize = image.st_rect.zw - image.st_rect.xy;
     vTextureOffset = image.st_rect.xy;
 }
diff --git a/servo/resources/shaders/ps_rectangle.fs.glsl b/servo/resources/shaders/ps_rectangle.fs.glsl
index 61837732d314..a59b5cb81056 100644
--- a/servo/resources/shaders/ps_rectangle.fs.glsl
+++ b/servo/resources/shaders/ps_rectangle.fs.glsl
@@ -3,5 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 void main(void) {
+#ifdef WR_FEATURE_TRANSFORM
+    float alpha = 0;
+    init_transform_fs(vLocalPos, vLocalRect, alpha);
+    oFragColor = vec4(1, 1, 1, alpha) * vColor;
+#else
     oFragColor = vColor;
+#endif
 }
diff --git a/servo/resources/shaders/ps_rectangle.glsl b/servo/resources/shaders/ps_rectangle.glsl
index 6fcfc4255bfe..eb8c99226bf3 100644
--- a/servo/resources/shaders/ps_rectangle.glsl
+++ b/servo/resources/shaders/ps_rectangle.glsl
@@ -3,3 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 varying vec4 vColor;
+
+#ifdef WR_FEATURE_TRANSFORM
+varying vec3 vLocalPos;
+flat varying vec4 vLocalRect;
+#endif
diff --git a/servo/resources/shaders/ps_rectangle.vs.glsl b/servo/resources/shaders/ps_rectangle.vs.glsl
index ee2adacec2d8..486b82d5fc97 100644
--- a/servo/resources/shaders/ps_rectangle.vs.glsl
+++ b/servo/resources/shaders/ps_rectangle.vs.glsl
@@ -14,6 +14,12 @@ layout(std140) uniform Items {
 
 void main(void) {
     Rectangle rect = rects[gl_InstanceID];
-    write_vertex(rect.info);
     vColor = rect.color;
+#ifdef WR_FEATURE_TRANSFORM
+    TransformVertexInfo vi = write_transform_vertex(rect.info);
+    vLocalRect = rect.info.local_rect;
+    vLocalPos = vi.local_pos;
+#else
+    write_vertex(rect.info);
+#endif
 }