diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
index 4d2e3461d5..c3038097c0 100644
--- a/lib/text/ui_text_displayer.js
+++ b/lib/text/ui_text_displayer.js
@@ -468,7 +468,9 @@ shaka.text.UITextDisplayer = class {
 
     const regionElement = shaka.util.Dom.createHTMLElement('span');
 
+    const linesUnit = shaka.text.CueRegion.units.LINES;
     const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const pixelUnit = shaka.text.CueRegion.units.PX;
     const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
     const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
     const viewportAnchorUnit =
@@ -479,12 +481,14 @@ shaka.text.UITextDisplayer = class {
 
     regionElement.style.position = 'absolute';
 
-    const linesUnit = shaka.text.CueRegion.units.LINES;
-    if (region.heightUnits === linesUnit && region.widthUnits === linesUnit) {
+    if (region.heightUnits === linesUnit) {
       regionElement.style.height = region.height * lineHeightMultiple + '%';
-      regionElement.style.width = region.width * lineWidthMultiple + '%';
     } else {
       regionElement.style.height = region.height + heightUnit;
+    }
+    if (region.widthUnits === linesUnit) {
+      regionElement.style.width = region.width * lineWidthMultiple + '%';
+    } else {
       regionElement.style.width = region.width + widthUnit;
     }
 
@@ -504,6 +508,19 @@ shaka.text.UITextDisplayer = class {
       regionElement.style.left = region.viewportAnchorX -
         region.regionAnchorX * region.width / 100 + viewportAnchorUnit;
     }
+    if (region.heightUnits !== pixelUnit &&
+        region.widthUnits !== pixelUnit &&
+        region.viewportAnchorUnits !== pixelUnit) {
+      // Clip region
+      const top = parseInt(regionElement.style.top.slice(0, -1), 10) || 0;
+      const left = parseInt(regionElement.style.left.slice(0, -1), 10) || 0;
+      const height = parseInt(regionElement.style.height.slice(0, -1), 10) || 0;
+      const width = parseInt(regionElement.style.width.slice(0, -1), 10) || 0;
+      const realTop = Math.max(0, Math.min(100 - height, top));
+      const realLeft = Math.max(0, Math.min(100 - width, left));
+      regionElement.style.top = realTop + '%';
+      regionElement.style.left = realLeft + '%';
+    }
 
     regionElement.style.display = 'flex';
     regionElement.style.flexDirection = 'column';
diff --git a/test/text/text_displayer_layout_unit.js b/test/text/text_displayer_layout_unit.js
index b6e1d01a7b..617e1788f2 100644
--- a/test/text/text_displayer_layout_unit.js
+++ b/test/text/text_displayer_layout_unit.js
@@ -238,7 +238,8 @@ filterDescribe('Cue layout', shaka.test.TextLayoutTests.supported, () => {
       const cue = new shaka.text.Cue(0, 1, '');
       cue.region.id = '1';
       cue.region.height = 15;  // %
-      cue.region.viewportAnchorX = 20; // %
+      cue.region.width = 60;  // %
+      cue.region.viewportAnchorX = 40; // %
       cue.region.viewportAnchorY = 10; // %
       // eslint-disable-next-line max-len
       cue.backgroundImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAA8BAMAAABMVCNvAAAAElBMVEX9/vtRldU+uUv6vAnvNjWzvsvH461AAAABvUlEQVRIx7WWwY6CMBRFYQb2Nhn22sS9o5m9icy+aPn/X5lS6r221gfTxLsC0pN7XovE6j1p9d6UcB/apYTUU/YlhT7bArCwUocUg9sCsMxVF7i2Pwd3+v93/Ty5uEbZtVVd+nacphw08oJzMUmhzxWgyYHDBHbRo9sMHmVX5bOJTENyrq0rMjB1EUG61ipMBtBEYM41qakVXLk3eVdyagMQrqNB47ProO4hGCbu+/4MMHUlp6J2F8c58pR3bRVj/B1cm94nB2IlatSDq53BW8Z1i4UEed3PueQqhxTkA781L10JBb2aNwAvGdddAj66NhKon0C6onHZtXKhKxolVx46XbtyUHLdRaaxqyXISoBxYfQOftFVBPnZuSfrSpCFcBXAYwp2HlrtSrBi1BrXlFt2RSEGXOn6DRCc6EpQgYMoXGWQIbLsSpCizAOIABQ4yZVgV2VAwfXlgPJvi6DJgnUGvMEUA0qgBTh6cOCAsmsD8LdDIQYUKiuA50FdBwy4DFqAtXCCDMAGYEtOCDYBrgYfFfn/G0ALsAInVgYruIaHnQSxcroKI1ZrU9/PuQmmq9OO43xhhUI5jR3lBX8x/RKsZNOu/wAAAABJRU5ErkJggg==';