Trying to add an angled border to my header and then also adding a box shadow around the angled border.
Seems to work fine but on Firefox there is some white background showing around the box shadow.
Code is as follow
header {
background: #41ade5;
color: #fff;
position: relative;
z-index: 1;
padding: 45px;
}
header:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
z-index: -1;
box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}
body {
margin:0;
}
http://codepen.io/velnias2015/pen/KaBzrq
Looks fine on all other browsers, is there a fix for firefox ?
Add translateZ(1px) to fix the antialiasing issue with the transform.
transform: translateZ(1px) skewY(-1.5deg);
Render issues with transforms are common and modifying 3d transform properties are often the best way to fix them because it causes the browser to render using different methods. Other common fixes in this same vein but don't seem to apply here are: backface-visibility: hidden and perspective: 1px.
Related
As I was in the process of trying to make an animated figure (transitions on hover), I found out that the background of my <figure> is showing near the edges when I apply border-radius: 50% to it, even though my image should be taking up all available space.
For a quick demo that illustrates the problem, please look at http://codepen.io/anon/pen/KwMMKz
HTML
<figure>
<img src="http://placehold.it/400x400" alt>
<figcaption>Demo</figcaption>
</figure>
CSS
figure {
background-color: red;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
position: relative; /* For caption */
}
img {
border-radius: 50%; /* Forced on image for smooth transition */
width: 100%;
transition: opacity 1s ease-out;
}
figcaption {
position: absolute;
top: 100%;
left: 0;
width: 100%;
color: hotpink;
text-align: center;
transition: top 1s ease-out;
}
figure:hover img {
opacity: 0;
}
figure:hover figcaption {
top: 50%;
}
Please note: I know that placing the background-color on figure:hover is a work-around, but I am more interested in the reason why this "jagged border"-like look is appearing.
My guess is that it has to do with AA rendering (or something related) of the browser and that it treats the <figure> element differently than a media element such as <img>, but I can't find any proof of this online. Is this a bug, is it a "feature", or is it something I can actually fix?
Lastly, I also know that I could have used transform: translateY(); here for the animation, but that's not part of my question so please don't provide it as an answer.
UPDATE 17/12 14:03
It appears that this issue is not exclusive to border-radius: 50%. The issue can occur when any wrapping element uses border-radius in combination with overflow: hidden, when the wrapper contains content that is equal or bigger than the wrapper's dimensions.
UPDATE 17/12 14:14
Neither the usage of overflow: hidden on the wrapper element, nor the usage of border-radius on the contained image (or any other child element) seem to be the cause of this as they can be interchanged and the pixelated edge will still appear.
This seems to indicate that this issue is solely caused by 2 DOM elements being in exactly the same place, when any sort of border-radius is applied to the wrapper element and the visible area of the child is limited to that of the parent's.
I've been having same issue and ended up using pseudo element instead of background, kinda like that:
figure::before {
content: '';
display: block;
background-color: red;
width: 400px;
height: 400px;
transform: scale(0.997);
border-radius: 50%;
}
This allowed me to create 'pseudo background' which I later shrinked a little bit with transform: scale(0.997); so it will be just the same size but a bit below visible edge. Of course in your case you would also need to position image absolutely so it is not pushed below by this ::before.
It appears that it is indeed a "feature" of how the browser handles border-radius to give a smooth edge to the rounded corners of a container. The image background is anti-aliased in the same way (but as it is transparent has no effect) as can be seen by setting the img background color.
When the border is anti-aliased it "bleeds" into the background to soften the edges and so you are seeing that around the image as a "jaggy" ring in much the same way you would see a corona around the moon during a full solar eclipse.
the issue is always there, whether the anti-aliased object is covered or not, if you were to draw a circle then anti-alias it, you would see the circle is marginally narrower than the anti-aliased version. Most anti-aliasing algorithms aggregate the surrounding pixels of the object rather than those contained within it.
To overcome it, you'd either need to make your image large enough to cover the space taken up by the anti-aliased edge or reduce the container such that the anti-aliased area is smaller than the image.
You could add a new tag with an opacity of 0 then have that fade in with the image fading out.
figure {
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
position: relative; /* For caption */
}
background {
background-color: red;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
opacity: 0;
position: fixed;
z-index: 5;
transition: opacity 1s ease-out;
}
img {
border-radius: 50%; /* Forced on image for smooth transition */
width: 100%;
transition: opacity 1s ease-out;
position: relative;
z-index: 100;
}
figcaption {
position: absolute;
top: 100%;
left: 0;
width: 100%;
color: hotpink;
text-align: center;
transition: top 1s ease-out;
z-index: 10000;
}
figure:hover img {
opacity: 0;
}
figure:hover background {
opacity: 1;
}
figure:hover figcaption {
top: 50%;
}
<figure>
<background></background>
<img src="http://placehold.it/400x400" alt>
<figcaption>Demo</figcaption>
</figure>
Notice I added the background tag and removed background-color from figure
http://codepen.io/marczking/pen/KwMgaR
So after playing around (used background-image and pseudo-elements, changes nothing...) you notice that this light border is only visible if you apply round corners. So I am assuming here it has to do how the Browser renders the CSS, nothing wrong with the CSS-rules ^^)
<figure>
<figcaption>Demo</figcaption>
</figure>
figure {
background-color: red;
width: 400px;
height: 400px;
border-radius: 100px;
position: relative; /* For caption */
}
figure::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url("http://placehold.it/400x400") no-repeat;
border-radius: 100px; /* Forced on image for smooth transition */
transition: opacity 1s ease-out;
}
figcaption {
position: absolute;
top: 100%;
left: 0;
width: 100%;
color: hotpink;
text-align: center;
transition: top 1s ease-out;
}
figure:hover::before {
opacity: 0;
}
figure:hover figcaption {
top: 50%;
}
I've wrote a little experiment for a parallax background header using only CSS: http://codepen.io/Kageetai/pen/yIdAq?editors=110
It's works very well in Chrome but in Firefox the header has a strange behaviour, even though Codepen uses -prefix-free. The background images shoves itself on top of the content below and the jumbs after scrolling down a bit.
It uses the technique found here, which I think is very elegant. So I copied most of it and wanted to apply it for a header.
I suppose it has something to do with that part, which mainly makes the parallax happening:
.parallax {
position: relative;
//padding: 25vh 10%;
padding: 0.1px; // strange behaviour with padding 0
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
transform-style: inherit;
background: 50% 50% / cover;
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
background: 50% 50% / cover;
}
}
header {
text-align: center;
color: whitesmoke;
&:before {
background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
transform: translateZ(-1px) scale(2);
z-index:-1;
}
}
And furthermore the fixed navigation isn't fixed at all on Chrome and Firefox.
Anyone any ideas?
Thanks!
Add position:relative to your #wrapper that will fix overlapping of image on the text.
add z-index="2" to .nav
check the codepen here Code pen
I'm afraid I'm facing a render glitch in the current Firefox (24.0), while Chrome (30) renders the same code as expected.
Here's the code: http://dabblet.com/gist/6982745
HTML:
<div class="triangle"></div>
CSS:
.triangle {
height: 50%;
width: 40%;
position: relative;
top: 50px;
left: 50px;
background-color: black;
overflow: hidden;
/*
* Here comes the malicious line:
*/
transform: rotate(-18deg);
}
.triangle:before {
content: "";
width: 200%;
height: 300%;
position: absolute;
background-color: white;
transform-origin: left top;
transform: rotate(-52deg);
}
.triangle:after {
content: "";
width: 200%;
height: 300%;
position: absolute;
top: 38%;
background-color: white;
transform-origin: left top;
transform: rotate(26deg);
}
Basically, there's a black square (.triangle) which is partially covered by rotated white squares (:before and :after) to create a triangle. The black square itself is rotated by 18 degrees - which causes Firefox to render some kind of gray border around .triangle - even if the both white squares should cover every pixel in this area.
Chrome, as a reference, omits such a border.
A little experimenting showed me that the glitch only occurs with rotations other than 0°, 90°, 180° ...
My questions are: Am I doing something wrong? (I know that there are simpler ways to create a triangle - it's just a simplified example) Is there a known workaround for this glitch? I already tried box-shadow and border - both without success.
Thanks in advance :)
I am applying a subtle CSS3 transform to a HTML5 video element, but I am getting unpleasantly rigid edges at the sides of the video in Chrome.
http://cl.ly/image/0v0m421N1J1U/Screen%20Shot%202012-07-16%20at%2021.57.37.png
I've looked around the internet for solutions. Some people have suggested adding a white border or box shadow to mask the edges, but I've found no luck. I've also tried setting the -webkit-backface-visibility property to hidden. Are there any other possible workarounds?
I played around with this a bit and I could could come up with a solution:
.wrapper {
-webkit-transform: rotate(30deg) translate(100px,100px);
position: relative;
float: left
}
.wrapper:after {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff;
}
video {
display: block;
}
It's just a pseudo-element on top of the video which has two box-shadows, one inset the and other outset. This solution will only work if your background has a solid color.
http://jsfiddle.net/5SuGb/
I am currently running into a problem when trying to implement a simple rollover using CSS :after and :hover pseudo-elements.
Have a look at the clock and facebook icons to the right: http://clean.philippchristoph.de/
Here's the CSS code:
.icon {
background: url('../img/clock_icon.png') top left no-repeat;
width: 25px;
height: 25px;
}
.icon:after {
.transition(opacity, .2s, ease);
content: " ";
position: absolute;
top: 4px; left: 5px; bottom: 0; right: 0;
background: url('../img/clock_icon.png') no-repeat;
background-position: -25px 0;
opacity: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
As you can see, the image is faded using a sprite and opacity. However, now I can't seem to hover both elements anymore. As you will see on the example page, you can hover over the facebook icon, but not over the clock. If you remove the facebook icon, you can hover over the clock again. Note that the two icons are entirely seperate elements.
I've tested this behavior on both FF and Chrome on Windows.
It'd be awesome if someone could shed some light onto this issue.. :)
Replace your CSS with this one (I mean the mentioned classes only, not your entire CSS :) ):
.icon {
background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
height: 25px;
width: 25px;
position: relative
}
.icon:after {
-moz-transition: opacity 0.2s ease 0s;
background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
bottom: 0pt;
content: " ";
left: 0;
opacity: 0;
position: absolute;
right: 0pt;
top: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
.facebook, .facebook:after {
background-image: url("../img/facebook_icon.png");
}
.clock {
position: relative
}
.clock div {
-moz-transition: opacity 0.2s ease 0s;
color: #A0A0A0;
font-size: 12px;
left: 40px;
line-height: 11px;
opacity: 0;
position: absolute;
top: 5px;
width: 160px
}
You need to add position: relative to your icon class, so that the generated content is positioned relative to that, rather than the parent. I've tried to simplify what you have in a fiddle, though I wasn't 100% sure what you are after. Is that close? I also amended the positioning of the generated content.
It's worth noting that - annoyingly - you can't apply a transition to generated content (which is why any attempt to have the opacity transition on these elements will fail in your case). Hopefully this will change soon.