W3C home > Mailing lists > Public > www-style@w3.org > April 2017

Re: [css-backgrounds] [css-images] Interop for sizing gradients with only width

From: Stefan Schumacher <stefan@duckflight.de>
Date: Thu, 13 Apr 2017 17:52:28 +0530
To: Henrik Andersson <henke@henke37.cjb.net>, www-style@w3.org
Message-ID: <c5709f28-1a6a-b94c-1855-9eff0e8efde0@duckflight.de>
Hello Henrik,

Am 13.04.2017 um 16:00 schrieb Henrik Andersson:
> This following code acts differently in Chrome and SeaMonkey(Gecko).
> Which is correct?
> 
> Chrome gives the same result as if the background-size specified 33% for
> the height. SeaMonkey thinks it should have a height of 100%.
> 
> div {
>     width: 160px;
>     background-repeat: repeat-x;
>     background-size: 33%;
>     height: 400px;
>     background-image: linear-gradient(red, red);
>     border: black solid 1px;
> }
Changing your example a bit shows that both browsers show the same
result when you use this document with the added value for vertical:

<!DOCTYPE html>
<html>
<head>
	<title>Background-Repeat Example 33%</title>
	<style type="text/css">
div {
	width: 400px;
	background-repeat: repeat-x;
	background-size: 50% 50%;
	height: 400px;
	background-image: radial-gradient(red, blue, red);
	border: black solid 1px;
	}
	</style>
</head>
<body>
<div></div>
</body>
</html>

Since the general behaviour is to use the given value for all possible
values if there is only one given, I feel that Chrome is right here.
Firefox keeps the 100% vertical and does not change the vertical value
probably because it is not given as the second value. So it keeps the
default.
Would be nice for SeaMonkey to change that behaviour. For now it's best
to use both values.

Stefan
Received on Thursday, 13 April 2017 12:23:15 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:07 UTC