After last Chrome update version 83.0.4103.61 I got strange behaviour of 'width' property for some of my elements. For some elements where the 'width' is not strictly defined by CSS the real width is in floating point number like 125.487px. Due to that I see some vizual glitches for buttons, menus, ... If I will try to manualy set the width to exact valuethen it looks good.
Is there a way to push Chrome to not use floating point numbers?
For better understanding I add a picture. When I manually change the width of button to 81px or 82px it is fine. But if it is something in the middle then 1px is missing. It sounds to me like a space of 82px is reserved but then only 81px are rendered and one px is just missing.
Related
I have a div, which has it's border property set to:
border: 1px solid #3a87ad;
When I inspect this div in my browser (using Firefox 60.0.1), the computed values for the border are 0.6 px. This wouldn't be an issue alone, but I am using multiple numbers of these divs in a plugin, which places them one below the other, and when it calculates the top position of each div, it uses exact values. After 3-4 divs placed, I can see a tiny white line (the extra white-space from the borders), that starts adding up on the screen.
Unfortunatly, I can't provide a fiddle, as the code is too large, but I am hoping someone else also experienced simmilar issues, and knows a solution.
What I already tried, is refreshing my zoom settings in the browser, but that didn't help either, viewing on 100% zoom, the problem still persists.
Thanks!
I think your code is overridden by some other CSS you use in your Plugin
Check it Carefully
and try border: 1px solid #3a87ad!important;
I hope it works
I could do with a bit of help on this one.
This page; http://fredericacards.co.uk/greetings-cards.php
has a bunch of divs for products with an h3 heading. That h3 has a 20px top margin in Safari and a 20px top and bottom margin in Firefox that doesn't appear to originate from anywhere I can find.
It's an old-ish site so I haven't used a boilerplate reset but I've done the usual margin and padding 0 for *
I have debugged to the extent of reducing the page to just one offending div with Firebug but nothing I do, other than setting the top-margin to -20px, will shift that heading up.
What am I missing here?
I don't normally have a problem with spacing content so I guess there's something I'm carrying around that maybe a 2nd pair of eyes can spot.
You have some kind of funky characters in your product div - what code editor are you using? Look at the source HMTL:
I've got two inputs, styled primarily by Zurb's Foundation framework. They're in a .row.collapse and each in a .medium-6.columns (these columns are 50% width, floated left, no margins). The inputs themselves are 100% wide within their containers. It's all pretty simple, and the Inspector and jQuery.css are all returning what I'd expect them to. But there's a border issue. Here's the gist of the CSS:
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
This is to have the effect of collapsing the middle border. But for some reason, this border-right-width: 0 is throwing Webkit (Chrome and Safari but not Firefox) off. The inspector shows 1px border, and the proper border-color. The white input background lines up properly with the second input (that is, there's room for the border), but there's no gray border. Maybe it's rendering transparent?
If I open this up on a retina display, it renders normally - proper borders on both. If I zoom in, the borders show up when it hits the "small" media query (mobile device sizes). But I can't make this border show up on a non-retina, desktop display in Chrome.
Here's how it looks in Chrome:
And here's how it looks in Firefox:
To double-check, I used the Web Inspector to apply a simple border to the first element. It showed up fine (looked like the Firefox screenshot). Adding border-right-width: 0 reintroduced the problem. It seems clear that that's the issue. But I don't know why?
It seems like border-radius may play into this as well? The Firefox screenshot above shows a double-border in the middle, despite the Inspector showing 0 right border. If I uncheck border-radius, in Firefox, it fixes that issue.
These properties should all be independent of one another. Why are they affecting each other?
Edit
Trying to recreate in codepen. Unsuccessful so far, but it looks like it has something to do with transform - these inputs are in a container that is set with the following
position: absolute;
top: 50%;
left: 50%;
#include transform(translate(-50%,-50%));
This has the effect of vertically and horizontally centering the element no matter the width or height in modern browsers. When I turn off transform the border shows up as it should. As I understand, transform accesses the GPU? Or it can? It seems quite possible that this is what's throwing it off. If you look at the screenshot, there are strange border artifacts (like, a partial, interior border on the right side of the left element) that I can't explain.
Edit 2
It's got to be transform - changing the border-color to red makes this clear: the border is being rendered at a sub-pixel level and then, for some reason, cut off in a funky way. You can see a vague pink border around the left input:
This may or may not help and without the fiddle, it's difficult to recreate; but I wanted to share something I've recently encountered with webkit browsers and Foundation.
By default, Foundation attaches a right float on the last column in each row or horizontal block...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99% of the time this is never an issue, unless you have a very small border between columns. Webkit browsers calculate percentages strangely at times.
You mentioned your columns were floated left, but just in case this is still an issue; overriding the above pseudo class to float the last-child column left may help.
I'm working on a simple GWT app.
I have a FlexTable, inside of it there are labels and input widgets (e.g. listbox, textbox, date picker...), with this pattern:
LABEL INPUT LABEL INPUT
LABEL INPUT LABEL INPUT
and so on, so I have two columns of input fields with their descriptions.
I forced a setwidth("120px") on each one of these input widget, so I would expect them to be lined up (vertically). but they are not! a listbox element is shorter than the textbox, with no apparent reason.
Can someone explain me?
There are should be apparent reasons, I've also tried your case but I haven't faced such issue, it should be from your side try using firebug you can find something from there. Here is what I got with the code that you described, I didn't add any css style except setWidth("120px"):
Playing around with this link should give you a better understanding. fiddle here
A 120px wide textbox will be 120 wide, then the border is added (1px either side) , and the padding (1px either side) is added too, making 124px wide text box.
In a list box however the total width including the border and padding will be 120.
The key here is if you want a textbox with a width of 120px, and you have a border of 1px each side and padding 1px each side then you need to set your width to 116px. Keep the select as 120px though.
You are wrestling with 2 different box models. If you set both to box-sizing:border-box (may need vendor prefixes) then you will see consistent rendering.
See here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I'm using "Chosen" special input box for the "Project Type" input box on my form.
You can view here http://harvesthq.github.com/chosen/
Here's my page below. You'll notice name, email, phone etc are all standard input boxes... but when you get to project type it all works perfectly but when you click ON one of the selections.. it still works fine. Look very closely when you click OFF the input box after you delete one of the options that you choose (off to the right of the page for instance to lose focus), and youll see everything below it including the footer.. input boxes below it.. submit button etc all shift 1px. Just play with it for a minute if that wasnt a good explanation and you'll see it shifting
I can't figure how what property this is.. the only thing I changed was padding: 5px to padding 6px on the input inside the div so it would match the rest of the input boxes..
http://eastcoastefx.vaesite.com/contact
I've tested this in chrome only.
your div id="sel1DT_chzn" grows by 1 pixel when something is selected.
set its height to 33px
<div id="sel1DT_chzn" class="chzn-container chzn-container-multi"
style="width: 348px; height: 33px;"> ....
Here's a fix:
chosen.css, selector at line 172:
line-height:12px
The problem is that ".chzn-container-active .chzn-choices .search-choice" aka the project item (Branding, Web Development etc..) has a height of 31px (including padding, margin and border) while it's container is only 30px in height. So it can be no higher than 29px, or else it would expand its container like it's doing now.
What I did to solve it in my browser is subtract 1px of the top margin and 1px of the bottom margin. But it's up to you how to do it.