It seems that Chrome is not following the spec for interpreting the background-size property in CSS3.
Consider the following markup
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%;}
div {
height: 100%;
background-image: linear-gradient(to bottom right,red,green,blue);
background-size: 30%;
}
</style>
</head>
<body>
<div/>
</body>
</html>
This should place a single div which fills the view and is decorated with a rainbow gradient. My understanding is that this gradient should be 30% of the view in width and 100% in height.
The specification for the background-size property states
The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.
Thus, in this case, it is as if I had declared background-size: 30% auto.
and
An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.
and the specification for gradients states
The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object... CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all.
Thus, auto should default to 100%, and it is as if I had declared background-size: 30% 100%. Currently, declaring this specifically is how I am working around this.
This is exactly how Firefox (56.0.1) seems to display the page.
However, Chrome (62.0.3202.62) does not. It gets the width right (I may have cut a little of the edge off in the screen capture, but the rightmost repetition looks like about 10% as it should), but seems to interpret the height as also being 30%. IE 11 looks exactly the same as the Chrome display.
So, my questions:
Am I interpreting the specification correctly? The newest edition (4th) of CSS: The Definitive Guide seems to support my interpretation as well as the page at developer.mozilla.org (which suggests that this property has changed at some point).
If so, is this a known bug in Chrome which is being worked on/fixed? caniuse.com does not list any known issues with Chrome.
If not, how do I go about reporting a bug in Chrome (as there will be no IE 12, it obviously can't be fixed there, but may or may not work in Edge)?
It seems that there is a bug report filed as Issue 711489 at the chromium bug page. There is also a bug report filed for this with WebKit as Bug 170834 for the same problem. Both reports contain a test case for the correct behavior according to the spec.
Related
Under Chrome this is like this and how it is suppose to be :
However under firefox it goes like that :
Here is a link to see it link
Does someone has any link to a page where are explained the differences between navigators and their fixes ?
Replace max-width: 70% by width: 70% in this selector :
#miniMenu img { width: 70%; }
See this post on SO explaining issue on Firefox with max-width property :
Image mysteriously ignoring max-width in Firefox & IE
Especially theses lines from #Boris Zbarsky answer :
You have max-width: 100%, but 100% of what? Of the parent width,
right? But the parent is an inline-block (with class="sponsor") whose
width is not set, so its width depends on the children, and in
particular on the preferred width of the children.
The layout of this styling is undefined in the CSS specification. In
particular, the intrinsic width of the kids in this case depends on
the width of the parent which in turn depends on the intrinsic width
of the kids. See
http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the
relevant spec text and note all the "does not define" bits.
I am using IE browser version 10, Chrome browser version 34 and FireFox browser version 28. I have the following CSS class that works well with Chrome and FireFox browsers; the class (named ".container") makes HTML elements stretch whole window screen horizontally as expected. But with IE, the class does not work; all HTML elements shrink toward the center of the window screen horizontally. How can I update the ".container" class so it also works with IE? Thank you in advance.
.container {
max-width:initial !important;
width: initial !important;
min-width:1000px;
}
Sample using of the class:
<div class="container">
...
</div>
min-width and max-width are calculated based on provided width value. Here you state width:initial which is not a valid amount for such calculations to occur.
You need to specify a unit based number for width in order to correctly define the parameters for your expected behaviour.
min-width on MDN
The min-width CSS property is used to set the minimum width of a given
element. It prevents the used value of the width property from
becoming smaller than the value specified for min-width.
More on Width from MDN
To use min-width and max-width, these values as well as width need to be set to numeric units.
initial is not supported by IE10
https://developer.mozilla.org/en-US/docs/Web/CSS/initial?redirectlocale=en-US&redirectslug=CSS/initial
why not use auto?
I am trying to get a div to fit to only the content using intrinsic sizing, but chrome dev tools seems to be rejecting that style.
In the dev tools, that style has a strike-though through it and a yellow triangle with an exclamation mark as if it is an invalid style.'
The style gets a strike-through if I do it without vendor prefixes or with so none of the following are working:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
All of them have a strike-through through them.
What am I doing wrong? I have the latest versions of Firefox and Chrome and they are supposed to support this.
Update:
Here is a screenshot of what I am seeing in chrome dev tools:
http://cl.ly/image/1k0I21192Q36
The code you have written in your answer:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
should work totally fine. However the code in your screenshot:
div.container{
height:-webkit-fit-content;
height:fit-content;
}
won't work. This is because fit-content only applies to width and not height.
See the Mozilla Developer Network for working values for width and height - there are way more available for width:
https://developer.mozilla.org/en-US/docs/Web/CSS/height
https://developer.mozilla.org/en-US/docs/Web/CSS/width
According to MDN, the fit-content width does the following:
fit-content Experimental The larger of: the intrinsic minimum width
the smaller of the intrinsic preferred width and the available width
So for a height you can expect a div to expand it's height to fit the content within it (unless the content is positioned absolutely or floated). To get it to fulfil the last part (making sure it doesn't exceed the available space) you could add max-height:100%; depending on the structure of your html.
I have a golf score card generator. Structurally the page has a div of class .printarea wrapping a 1072px wide table.
I have gradually been getting it so printing presents a single page in landscape orientation in all major browsers.
In Firefox if rotation and scale are specified on BODY then scale fails to work. So I moved the rotation to the DIV containing everything else. This achieved rotation but offset the table so that some cropping occurs on the right side (bottom of table) and top (right side of table).
I attempted to correct this with margins and with absolute positioning but this resulted in small disjointed pieces of the table shunted to a second page. Reducing scale even to tiny proportions never resolves the second page placement.
Playing with origin settings I eventually get to position:absolute; -moz-transform-origin: 400px 900px; This loses part of the top of the table (left side of page) and displaces the last two rows despite the fact that the foot of the table (right side of page) is easily 3 inches from edge of paper. Scaling down even to tiny proportions does not correct the displacement.
Here's a static copy of one card: http://egolfplan.com/example.html
At end of post I will add screenshots of PDFs from printing.
Current CSS
<style type="text/css" media="print">
BODY {
width:100%;
height:100%;
-webkit-transform: rotate(-90deg) scale(.68,.68);
-moz-transform:scale(.48,.48);
zoom: 60%;
}
.printarea {
width:100%;
height:100%;
-moz-transform:rotate(-90deg);
}
#page {margin: 0;}
</style>
This is scaled to 68%
Scaled to 48%
-moz-transform-origin: 400px 900px;
In general, I believe that rotating via CSS is unreliable given varying browser implementations, especially in your case since you are using browser specific properties.
I would do one of the following.
Use a robust javascript library such as jQuery Rotate
(http://code.google.com/p/jquery-rotate/) instead of CSS.
Write some
server side code that actually generates an image of this score
card, which can be readily scaled or rotated. PhP can do this for instance.
Change your design to
avoid having vertical text.
As you have to use specific vendor properties and they will render different, I suggest you to use use CSSSandpaper.
This article talks about your need: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
Firefox appears to determine pagebreaks for printing BEFORE the print stylesheet is applied. This results in the the scale transform being applied to each printed page rather than the body block as a whole.
We ended up using Browshot.com to render each card as a JPEG screenshot and sending that to the user as a download.
After experimenting with the css3 flex-box proporty, I quickly noticed some differences in Chrome and Firefox.
In particular: if you set a width on an element that should be flex,
firefox will flex the element according to what it needs, it takes the width style into account but its only a variable.
Chrome will respect the with style fully,
An example:
<div id="box">
<div class="flex-box">Test</div>
<div class="flex-box">Test Text</div>
</div>
If the 2 divs inside the box have the same width assigned, chrome will make them the same size. Firefox will reconize that the second div needs more space, and thus it gets more allocated.
who is right?
Remember the flex doesn't apply to the width, it applies to the free space after the minimum intrinsic width has been determined. This produces counter-intuitive results in several common cases, as has been pointed out on the www-style mailing list. I've found that, unless you want the CSS re-ordering or the multi-line (which isn't yet implemented in Firefox and Chrome), what you think you want to use display: box and box-flex for you really want to use display: table and display: table-cell.
But back to your actual question: I found Firefox and Chrome display identically if you set a width in pixels, but not if you set a width as a percentage. As far as which browser is doing it correctly at the moment, it's a fair bet Firefox is implementing what the spec originally intended as the original spec is describing what the XUL property does, and the XUL property is what this is all based on. As others have mentioned, whether or not the final spec ends up matching this original intention is unknown.
I don't think any browser is right or wrong as flexbox is still a working draft. At any time the spec could change and render another browser right or wrong.
http://www.w3.org/TR/css3-flexbox/
I disagree with robertc's statement "But back to your actual question: I found Firefox and Chrome display identically if you set a width in pixels, but not if you set a width as a percentage."
I am currently using the flexbox in an attempt to show how simple it is to convert a rather heavy in JS and CSS site to a very simple HTML/CSS3 site. Once conclusion I have come to with regards to setting width in pixels:
#main {
display: box;
}
#main > section {
width: 120px;
padding: 10px;
border: 5px solid #000;
}
In chrome, the total width = 120 + 20 + 10 = 150px
In ff, total width = 120px (the 20px padding are inside the 120 and the 10px border is as well)
Another inconsistency I found, in chrome, #main IS greedy and takes up 100%, as you would likely expect. In Firefox, you need to set with to 100% on #main in order for it to act as you would expect.
I'm still working on ironing out all differences in all supported browsers, I will try to post when I have more to add to this. Sadly, as cool as he flexbox model is, and as easy as it makes a lot of shit, its far from consistent.
One more thing, using CSS transitions to change dimensions works well with explicitely defined dimensions (ie. pixels)... but if the dimension is defined by the box's flex, the animation simply jumps between the flex values... no where near as smooth (though, instead of heaving flex of 5 and 1, you could have flex of 500 and 100). In fact, chrome will not animate between flex values, just jumps. FF on the other hand does this nicely.
I'm just really hoping things progress to the way FF handles flexbox, while chrome is close, I just don't agree with how some things are handled, and the lack of animation between flex values just plain sucks.