Bug 186355 – All WebKit based browsers render <meter> elements in an unexpected way

• Status: RESOLVED
• Resolution: INVALID
• Component: Layout and Rendering

[Chris Deeming]

Hello

I'm hesitant to report this as technically it isn't all WebKit based browsers. It also affects Blink (Chrome) and EdgeHTML (MS Edge) and it only works correctly (in my mind, at least) in Mozilla browsers.

But, certainly, in the cases that are (in my opinion) incorrect, the common factor appears to be WebKit (assuming that Blink is a fork and Microsoft tend to be more closely mirroring WebKit in its standards).

Anyway, it's quite simple. Open the following URL in both Safari/Chrome and Firefox:

https://jsfiddle.net/chrisxf/kqxt5pfa/

You will see that in WebKit browsers both value 3 and 4 are green, whereas in Firefox only value 4 is green, and value 3 is yellow.

I've noted what the expected results are and explained the logic for that.

It's entirely possible that the bug is on Mozilla's side, but the logic I've written seems to make the most sense to me and suggests that WebKit could be wrong. It could also be possible my logic is just totally wrong...

Any advice or future fixes appreciated.

Chris

[Simon Fraser (smfr)]

I'm not sure I agree. The "high" attribute specifies the lower bound of the "high" range, so if value == high, then the high color should be used.

[Chris Deeming]

(In reply to Simon Fraser (smfr) from comment #1)
> I'm not sure I agree. The "high" attribute specifies the lower bound of the
> "high" range, so if value == high, then the high color should be used.

You know, I can see your point, and I think you're right.

I just totally dumbed it down for myself and my value is essentially 75% which is in the last third (66.6%-100%) so that should be high.

Ok, I guess we can close this. I'll file a report with Mozilla instead.

Thanks Simon.