
Both meter elements should have a nested shadow box with a width specified:
| "
    "
| <meter>
|   max="100"
|   value="70"
|   <shadow:root>
|     <style>
|       "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
|     <div>
|       id="inner"
|       pseudo="-webkit-meter-inner-element"
|       shadow:pseudoId="-webkit-meter-inner-element"
|       <div>
|         id="bar"
|         pseudo="-webkit-meter-bar"
|         shadow:pseudoId="-webkit-meter-bar"
|         <div>
|           class="optimum"
|           id="value"
|           pseudo="-webkit-meter-optimum-value"
|           style="width: 70%;"
|           shadow:pseudoId="-webkit-meter-optimum-value"
| "
    "
| <meter>
|   high="6"
|   low="3"
|   max="10"
|   min="0"
|   optimum="5"
|   value="10"
|   <shadow:root>
|     <style>
|       "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
|     <div>
|       id="inner"
|       pseudo="-webkit-meter-inner-element"
|       shadow:pseudoId="-webkit-meter-inner-element"
|       <div>
|         id="bar"
|         pseudo="-webkit-meter-bar"
|         shadow:pseudoId="-webkit-meter-bar"
|         <div>
|           class="suboptimum"
|           id="value"
|           pseudo="-webkit-meter-suboptimum-value"
|           style="width: 100%;"
|           shadow:pseudoId="-webkit-meter-suboptimum-value"
| "
    "
| <meter>
|   high="6"
|   low="3"
|   max="10"
|   min="0"
|   optimum="0"
|   value="10"
|   <shadow:root>
|     <style>
|       "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
|     <div>
|       id="inner"
|       pseudo="-webkit-meter-inner-element"
|       shadow:pseudoId="-webkit-meter-inner-element"
|       <div>
|         id="bar"
|         pseudo="-webkit-meter-bar"
|         shadow:pseudoId="-webkit-meter-bar"
|         <div>
|           class="even-less-good"
|           id="value"
|           pseudo="-webkit-meter-even-less-good-value"
|           style="width: 100%;"
|           shadow:pseudoId="-webkit-meter-even-less-good-value"
| "
  "