Firefox is creating small lines on the triangles I've created and rotated.
Chrome
FireFox
I've looked into what other questions have done and they recommended trying adding transform: translateZ(1px) rotate(-45deg); and background-clip: padding-box; but neither of those worked for me.
Also, it is only the rotated triangles that have the line in the firefox browser.
The page can be viewed at bingo-caller.herokuapp.com
I tried on your page and it seems to work, add translateZ(1px) to the transform for the triangles.
try this hack on the masked element: filter: blur(0.01px);
Until now desc 2022 that still haven
I fix using border with color depending to the background and can not use transparent of border color e.g I use white because my parent background is white
border: 1px solid white;
Related
I've some issues with a transform:rotate on Chrome (v54 / Windows 10) and others modern navigators I could test (Edge, Firefox... IE), actually. The edges of my div are a bit jagged, it's not as horrible as it was in Chrome's version of 2012 but it still not perfect.
I tried several tricks as
backface-visibility: hidden;
transform: translate3d( 0, 0, 0);
-webkit-transform-style: preserve-3d;
but none of them seems to completely work. The result is smoother than the initial one but still not fully satisfying.
Here's a link to my jsfiddle : https://jsfiddle.net/2szkvj70/1/
and a screenshot :
Am I a bit too exigent or is it possible to get the perfect no-aliased result ? :)
Thanks in advance !
You can fix this by adjusting your CSS slightly:
outline: 1px solid transparent;
instead of:
outline: 1px transparent;
https://jsfiddle.net/2szkvj70/2/ - This provides a comparison.
I'm working on a new client's website, and everything looks good in every browser except safari. The Problem: The Background image is not responding to the css in place in safari(The 5px size).
.et_pb_section_0 { /* The background CSS */
background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}
I have been unable to find any definitive information regarding this issue.
Because Safari shares webkit functionality with chrome, attempts to resolve this issue via that resulted in the site breaking in chrome. Is there a way to target safari specifically?
In the CSS background shorthand property, the background-position comes before background-size. This makes your 5px correspond to background-position, not background-size.
To fix this, add a background-position and separate it from background-size with a slash:
.et_pb_section_0 {
background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}
Alternatively, define background-image and background-size separately:
.et_pb_section_0 {
background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
background-size: 5px;
}
I am using this angular directive for mapbox (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map) and trying to get the border-radius to be 10px which works perfectly in Chrome and Firefox but on Safari it isn't working.
This is the CSS I am using (For some reason it only works with opacity: .99 on chrome/firefox)
.angular-mapbox-map{
opacity: .99;
border-radius: 10px;
}
Does anybody know what is going on or how to resolve this. You can play with the mapbox element in the link above using chrome dev tools or the equivalent.
I found a solution here How to make CSS3 rounded corners hide overflow in Chrome/Opera using:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
I have been searching for answers for a couple of days and I found the answer awhile ago but it's not really what I want to get. The PNG backgrounds worked for IE8 and above. In IE6, it does not work. So I used this:
#nav_bar {
*background:none;
*width: 34px;
*height: 151px;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../img/bg_navbar2.png');
I got a 100% transparent background but I want it only a 50% opacity. How do I tweak that line? Thanks for the help! I DON'T WANT TO USE JAVASCRIPT FOR THIS. I want a CSS3 semi-transparent background :)
IMAGES:
image in PS:
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/431809_10200713326188890_673360556_n.jpg
actual background image in browsers [EXCEPT IE6]:
https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/575657_10200713331029011_963068431_n.jpg
Looks like you just need to add the Opacity. For example:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
I'd recommend using conditional HTML to call a stylesheet just for IE6. Stars are not to be trusted!
I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.