Bug 186355 - All WebKit based browsers render <meter> elements in an unexpected way
Summary: All WebKit based browsers render <meter> elements in an unexpected way
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 11
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-06-06 10:04 PDT by Chris Deeming
Modified: 2018-06-06 11:23 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Deeming 2018-06-06 10:04:39 PDT
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
Comment 1 Simon Fraser (smfr) 2018-06-06 10:49:17 PDT
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.
Comment 2 Chris Deeming 2018-06-06 11:22:41 PDT
(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.