The following code (live demo at http://iamkate.com/sizes/) behaves differently in Firefox (61.0.1) from Chrome and Edge:
<!DOCTYPE html>
<html>
<head>
<title>
Sizes issue
</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<img
src="big.png"
srcset="big.png 1024w,small.png 128w"
sizes="(min-width:512px) and (max-width:767px) 100vw,128px"
alt="">
</body>
</html>
While Chrome and Edge show big.png (and stretch it to full viewport width) when the viewport width is between 512 and 767 pixels, Firefox only ever shows small.png and displays it at 128 pixels wide. However, if the media condition is changed to have only the min-width or the max-width, Firefox will display big.png at the corresponding viewport widths.
On a real site the image would be sized with CSS rather than relying on implicit sizing, with the consequence being that a version at too low a resolution is displayed by Firefox (you can verify this my modifying my example).
I'm aware that in this simplified example the sizes attribute could be rewritten to avoid combining min-width and max-width, but this won't apply in more complex cases with several such clauses.
I've searched Stack Overflow and Firefox's Bugzilla and I can't find any reference to this problem with combining min-width and max-width in a single media condition.
