Menu
Certain fluid designs, especially those involving %-width iFrames, seem to cause some strange rounding-type errors in Chrome (I've got version 21).
This Fiddle demonstrates the problem. Set the border to an integer pixel value, and the values you get back when you ask for them are floating point numbers slightly smaller than the expected value.
Trying the exact same code in CodePen doesn't yield the same results, presumably because the iFrame and other styles around it aren't set up the same way.
(I've also seen this behavior for the basic width and height attributes, although I was unable to replicate that part of the problem in jsFiddle.)
This doesn't seem to be a problem in Firefox or in IE8.
Any ideas as to what, specifically, is causing this strange behavior, and how I can work around it to get at the real values?
The plot thickens. In an attempt to shim around the problem, I found that values over 10px do not appear to be subject to the issue.
Also, based on @GionaF's comment, it appears to work properly in Chrome 22.
332
If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
The border-bottom-width property sets the width of an element's bottom border. Note: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. An element must have borders before you can change the width.
Select one or more cells that have a border that you want to change. Right-click over the cells you've chosen and select Format Cells and, in the popup window, click the Border tab. For a continuous line, choose one of the thicker styles from the Line box. In the Presets section, click your existing border type.
I can't reproduce this behavior in Chrome currently, but this behavior most likely has to do with Subpixel Rendering. Essentially, Webkit will do calculations using integer math to avoid floating point imprecision.
It seems that currently, border does not use subpixel rendering which may explain why the issue is not visible in new Chrome versions.
177
To reproduce your problem I have to change the zoom-level of Chrome. Changing the zoom-level back to 100% fixes it. It appears to be a bug, the calculated border width is always smaller than the defined border width, zooming in or out!
Your 10px border does give a value of 10 when the zoom-level is 110%, but on 125% it has the same problem as your 3px border.
edit: firefox has the same behavior!
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
