Just found another bug in chrome when using border-radius and box-shadow.
Hard to explain it, Look at the picture below.
The first box is fine and has a radius of 53px.
the second box loses its shadow on the corner, to me it looks like the shadow is now square but is being hidden with a overflow: hidden effect the radius of this box is 54px.
now the last box is screwed, the shadow looks the same as the second box, only not being hidden by the overflow:hidden effect, the radius of this box is 56px.
Check out a demo for yourself, it works fine in Firefox, The problem is in Chrome
Demo: http://jsfiddle.net/RmYea/1/
Can anyone shed any light on this, why it happens?
CSS:
div{
height:50px;
width: 90%;
margin: 20px auto;
border: 5px solid green;
box-shadow: 0px 0px 5px 2px inset;
}
div:nth-child(1){
border-top-left-radius: 53px;
}
div:nth-child(2){
border-top-left-radius: 54px;
}
div:nth-child(3){
border-top-left-radius: 56px;
}
Note: This only happens with inset
Chrome has some bugs to manage border-radiu.
In your case doesn't manage well the border, to solve this problem you have to change your logic I think because is a bug recognized of border-radius
See this link of something like your problem (not the same problem but some cases about bug in chrome like yours):
https://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475
Firstly I confirm I am not answering the original question, in the true sense, but I see this problem a little differently.
I would question the values being used for the border-radius in the first place.
The height of your <div> is 50px, therefore your border-radius value shouldn't be more than 50px ( this will provide a full height curve ).
Examples: http://jsfiddle.net/WWvxV/
Following the above, both browsers render the element as expected.
Again, I agree there is an issue with handling values that are larger than can be applied in Chrome, but I also think your initial values need revision.
Related
I've designed a table with flexbox and the borders on alternate/every third row has a single pixel space between content.
I couldn't find the space from the dev tools.
Fiddle here.
I've tried with 0 font size, changes in position and display property with no luck.
But when I set background color for the whole row, instead of one column, it fits well for all rows.
Like this,
.block {
display: flex;
border-bottom: 1px solid black;
.label {
background-color: blue;
padding: 10px;
flex: 1;
}
.value {
flex: 1;
}
}
Can someone help me find out where this extra space between border and content comes from and how to remove that. Thanks in advance.
Try to change all border to .5px
and no need to ad a border with the last .bloc
This has mostly to do with subpixel rendering on a zoomed in Chrome browsers. A lot of windows laptops have their display settings default at 150%, so it renders a 1px line at 1.5px.
Firefox is obviously better at this then Chrome, by the way. But this explains why some people using chrome do see the issue, and some don't. To reproduce, zoom in on Chrome on a site with small borders.
Chen Hui Jing has some good explanations on subpixel rendering on different browsers -> Sub-pixel rendering and borders
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.