JsFiddle example:
http://jsfiddle.net/Q5AjL/
Screenshot from jsfiddle in ie11, dev mode off:
Screen shot from my actual site:
Has anyone seen this before? In ie11 some of the borders have this strange broken affect.
It seems that the semi transparent image is breaking around the rounded corners. How on earth can i fix this? Sigh.. ie.. you are the pain in the side of my web design life.
.small-card{
border-radius: 5px;
display: inline-block;
width: 100%;
max-width: 400px;
margin-bottom: 25px;
}
.trans{
background-image: url(/png/transparent/white/40_percent.png);
background-repeat: repeat;
border: solid 1px #fff;
}
This is ie11. When i turn on devloper mode the issue vanishes! So confusing.
I really don't understand what is going on. And as above, as soon as i turn on developer mode the issue disappears. It only occurs where there is a rounded corner involved.
Related
Lately, I've gotten into making CSS art and I noticed something that I don't understand about CSS borders.
If I style an element to be rounded with a transparent background, and set a border on only one side, there's still a faint line on all the other sides that shows up only on mobile.
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
Compare the following CodePen on a PC vs phone to see what I mean:
https://codepen.io/aradevich/pen/mdrLvqx
Screenshot:
ellipse with 5px top border
This effect is particularly bothersome when it skews facial features in CSS art, like with the eyes here on mobile: https://codepen.io/aradevich/pen/qBaxQye?editors=1100
Does anyone know why this happens, and how I can address it?
Thank you!
Here is a different idea to have the same result without the border issue:
div.box {
width: 300px;
height: 150px;
background:
/* 150 = width/2 70 = height/2 - 5px of border */
radial-gradient(151px 70px at bottom, transparent 98%,purple)
top/100% 50% no-repeat;
border-radius: 50% 50% 0 0;
}
<div class="box"></div>
As far I know, maybe it's caused by browser rendering. So, the solution is change the graphic image to SVG or PNG instead of css.
In my application, I have a few icons that are drawn on every page. For performance reasons, I have them grouped into a single file and drawn as CSS sprites. For some reason, IE will occassionally draw them incorrectly. If you zoom in on the image, it looks like IE is off by 1 pixel.
This only happens in IE, does not happen in Chrome.
The behavior in IE is inconsistent. For some people, the icons are drawn correctly.
Here is some sample CSS:
.bannerIconLogout {
height: 13px;
width: 12px;
margin-right: 2px;
background-image: url("#{resource['images/common-images.png']}");
background-position: 0px -13px;
position: relative;
top: 1px;
}
Has anyone else seen this? Is there a way to work around it?
Rounded corners on my jQuery sliders only work in Firefox.
Renders correctly in Firefox 17.0.1 (see image below)
Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)
Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)
Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url's to the slider images, everything else will be missing)
My HTML:
enter code here
My CSS:
.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}
#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
My guess is that it's the old "foreground images aren't clipped" bug.
In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren't restrained by the radius.
I was under the impression that this was something that had been dealt with by the major browsers, but it's not something I've looked into for a while, so I may be mistaken in that. It certainly looks like it's what you're seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.
To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you're seeing.
If this is the problem, then the solutions are:
Use a background image instead; this won't be clipped.
Add an additional layer of markup -- eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
Ignore it, and wait for browser vendors to fix the issue.
I have got rollover images setup on a site i'm building using css background images like so:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.
Thanks very much as ever everyone!
Dave
Try adding this .rollover a {overflow:hidden}
on the following page:
http://dreamdeals.rnmtest.co.uk/
the login box on the right displays fine in firefox, ie8, safari, chrome etc but in ie7 & 6 the contents overflow. I have tried everything such as setting a height for the inputs but cant get it right. Anyone got any ideas?
I know this idea seems to at first glance make about as much sense as chopping off your own arms, but:
On #whyjoin input, instead of border: none, try using border: 0.
Here's a reference to the problem you're having:
http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/
So, despite border: 0 being the same as border: none, it's better use 0 because it's shorter and to avoid this bug.
I should probably go post that here.
In my IE8 (7 compatibilty mode), it's work fine ; But try to modify your height like this:
#whyjoin {
background-image: url(../images/whyjoinback.jpg);
background-repeat: no-repeat;
padding: 30px 5px 0 5px;
height: 70px; /* BG Image (100px) = 70px + 30px (padding) */
margin-top: -55px;
position: relative;
}
I Suggest you to place the #cardclip in absolute to not poluate the #rightcol.