diff --git a/components/style/lib.rs b/components/style/lib.rs
index c5f1aba1176..7a04003db3d 100644
--- a/components/style/lib.rs
+++ b/components/style/lib.rs
@@ -244,6 +244,12 @@ where
     }
 }
 
+/// A trait implementing a function to tell if the number is zero without a percent
+pub trait ZeroNoPercent {
+    /// So, `0px` should return `true`, but `0%` or `1px` should return `false`
+    fn is_zero_no_percent(&self) -> bool;
+}
+
 /// A trait pretty much similar to num_traits::One, but without the need of
 /// implementing `Mul`.
 pub trait One {
diff --git a/components/style/values/computed/length_percentage.rs b/components/style/values/computed/length_percentage.rs
index 6ee9a07377a..bf049fe202d 100644
--- a/components/style/values/computed/length_percentage.rs
+++ b/components/style/values/computed/length_percentage.rs
@@ -30,7 +30,7 @@ use crate::values::distance::{ComputeSquaredDistance, SquaredDistance};
 use crate::values::generics::{calc, NonNegative};
 use crate::values::specified::length::FontBaseSize;
 use crate::values::{specified, CSSFloat};
-use crate::Zero;
+use crate::{Zero, ZeroNoPercent};
 use app_units::Au;
 use malloc_size_of::{MallocSizeOf, MallocSizeOfOps};
 use serde::{Deserialize, Serialize};
@@ -556,6 +556,13 @@ impl Zero for LengthPercentage {
     }
 }
 
+impl ZeroNoPercent for LengthPercentage {
+    #[inline]
+    fn is_zero_no_percent(&self) -> bool {
+        self.is_definitely_zero() && !self.has_percentage()
+    }
+}
+
 impl Serialize for LengthPercentage {
     fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
     where
diff --git a/components/style/values/generics/transform.rs b/components/style/values/generics/transform.rs
index 21c4b8dd95f..2b8c27b8781 100644
--- a/components/style/values/generics/transform.rs
+++ b/components/style/values/generics/transform.rs
@@ -10,7 +10,7 @@ use crate::values::specified::angle::Angle as SpecifiedAngle;
 use crate::values::specified::length::Length as SpecifiedLength;
 use crate::values::specified::length::LengthPercentage as SpecifiedLengthPercentage;
 use crate::values::{computed, CSSFloat};
-use crate::Zero;
+use crate::{Zero, ZeroNoPercent};
 use euclid;
 use euclid::default::{Rect, Transform3D};
 use std::fmt::{self, Write};
@@ -194,7 +194,7 @@ pub use self::GenericPerspectiveFunction as PerspectiveFunction;
 pub enum GenericTransformOperation<Angle, Number, Length, Integer, LengthPercentage>
 where
     Angle: Zero,
-    LengthPercentage: Zero,
+    LengthPercentage: Zero + ZeroNoPercent,
     Number: PartialEq,
 {
     /// Represents a 2D 2x3 matrix.
@@ -218,7 +218,7 @@ where
     #[css(comma, function)]
     Translate(
         LengthPercentage,
-        #[css(skip_if = "Zero::is_zero")] LengthPercentage,
+        #[css(skip_if = "ZeroNoPercent::is_zero_no_percent")] LengthPercentage,
     ),
     /// translateX(x)
     #[css(function = "translateX")]
@@ -327,7 +327,7 @@ impl<Angle, Number, Length, Integer, LengthPercentage>
     TransformOperation<Angle, Number, Length, Integer, LengthPercentage>
 where
     Angle: Zero,
-    LengthPercentage: Zero,
+    LengthPercentage: Zero + ZeroNoPercent,
     Number: PartialEq,
 {
     /// Check if it is any rotate function.
@@ -446,7 +446,7 @@ where
     Angle: Zero + ToRadians + Copy,
     Number: PartialEq + Copy + Into<f32> + Into<f64>,
     Length: ToAbsoluteLength,
-    LoP: Zero + ToAbsoluteLength,
+    LoP: Zero + ToAbsoluteLength + ZeroNoPercent,
 {
     #[inline]
     fn is_3d(&self) -> bool {
@@ -810,12 +810,12 @@ where
 }
 
 #[inline]
-fn y_axis_and_z_axis_are_zero<LengthPercentage: Zero, Length: Zero>(
+fn y_axis_and_z_axis_are_zero<LengthPercentage: Zero + ZeroNoPercent, Length: Zero>(
     _: &LengthPercentage,
     y: &LengthPercentage,
     z: &Length,
 ) -> bool {
-    y.is_zero() && z.is_zero()
+    y.is_zero_no_percent() && z.is_zero()
 }
 
 #[derive(
@@ -839,7 +839,7 @@ fn y_axis_and_z_axis_are_zero<LengthPercentage: Zero, Length: Zero>(
 ///
 /// If a 2d translation is specified, the property must serialize with only one
 /// or two values (per usual, if the second value is 0px, the default, it must
-/// be omitted when serializing).
+/// be omitted when serializing; however if 0% is the second value, it is included).
 ///
 /// If a 3d translation is specified and the value can be expressed as 2d, we treat as 2d and
 /// serialize accoringly. Otherwise, we serialize all three values.
@@ -849,7 +849,7 @@ fn y_axis_and_z_axis_are_zero<LengthPercentage: Zero, Length: Zero>(
 /// cbindgen:private-default-tagged-enum-constructor=false
 pub enum GenericTranslate<LengthPercentage, Length>
 where
-    LengthPercentage: Zero,
+    LengthPercentage: Zero + ZeroNoPercent,
     Length: Zero,
 {
     /// 'none'
diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs
index 1f40b6cfa3b..513232dae08 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -18,7 +18,7 @@ use crate::values::generics::NonNegative;
 use crate::values::specified::calc::{self, CalcNode};
 use crate::values::specified::NonNegativeNumber;
 use crate::values::CSSFloat;
-use crate::Zero;
+use crate::{Zero, ZeroNoPercent};
 use app_units::Au;
 use cssparser::{Parser, Token};
 use std::cmp;
@@ -1486,6 +1486,15 @@ impl Zero for LengthPercentage {
     }
 }
 
+impl ZeroNoPercent for LengthPercentage {
+    fn is_zero_no_percent(&self) -> bool {
+        match *self {
+            LengthPercentage::Percentage(_) => false,
+            _ => self.is_zero(),
+        }
+    }
+}
+
 /// A specified type for `<length-percentage> | auto`.
 pub type LengthPercentageOrAuto = generics::LengthPercentageOrAuto<LengthPercentage>;