I am using borders on some content. However, I am finding an unwanted 1px outline the same color as the background color is being added around the border when the parent is transformed (at least with scale and rotate). This occurs on pseudo-elements of the children as well
.container {
transform:rotate(-45deg);
}
.child {
border:3px solid white; background:green;
}
jsFiddle to work with
I have tested on the newest Chrome and IE, the problem is on both
How can I get rid of this outline without using box-shadow or removing the transform?
Add a translateZ(1px)
.container {
position:absolute;
top:50%; left:50%;
-webkit-transform:translateZ(1px) rotate(-45deg);
transform:rotate(-45deg);
}
(not really sure why does this work ...)
fiddle
Seems that IE needs more fixing...
.container {
position:absolute;
top:50%; left:50%;
-webkit-transform:translateZ(1px) rotate(-45deg);
transform:perspective(999px) translateZ(1px) rotate(-45deg);
}
fiddle2
Not a great fix, but adding backface-visibility: hidden; which determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element, seems to fix it, at least in Chrome. I haven't got the possibility to test in IE though.
The reason I tried it is because this "hack" has solved simliar issues that I've had before. But I'm not really sure why it works ...
jsFiddle
In chrome you should be able to use -webkit-backface-visibility: hidden; to fix this. I'm not too sure about IE, I don't have anything to test that on right now.
http://jsfiddle.net/ayFbD/4/
Related
I have a button which will get a box-shadow on hover. It also has a transition. My problem is, it doesn't always display the same result, sometimes the box-shadow will be offset by a few px and not be equal on all sides as shown on the image:
Below is my code and here is JSFiddle demo.
div{
width:100px;
height:25px;
transition:.2s;
background:lightgrey;
border-radius:25px;
}
div:hover{
box-shadow:0px 0px 10px green;
}
<div></div>
As you can see if you remove the transition the box-shadow is deisplayed properly.
div{
width:100px;
height:25px;
background:lightgrey;
border-radius:25px;
}
div:hover{
box-shadow:0px 0px 10px green;
}
<div></div>
What is even more interesting to me is that JSFiddle demo, would display different outputs after deleting and pasting back some code while keeping it without changes overally, or by running the same code again, or reducing the transition time. It's hard for me to explain how to reproduce this but you might see it yourself if you play with a bit.
My question is how to keep it consistent, and most importantly how to keep the box-shadow equal while keeping the transition.
#edit
Video of issue
Also I've made a video of how I see the differences since some people reported not to see any problem. Is it at all possible it's somehow fault of my screen? (Hopefully the issue is visible on the video or maybe I'm just going crazy)
#edit2
It seems like it is a browser issue. Originally I encountered the issue on latest Chrome version, couldn't reporoduce the problem on latest Firefox. After discovering that thanks to comments I've added webkit prefixes to transition and box-shadow but it didn't solve the problem.
As you said, it seems to be a bug but to overcome this you can do it differently using a pseudo element where you apply the box-shadow but you animate another property (scale, opacity, width/height, etc)
div.box{
width:100px;
height:25px;
margin:10px;
background:lightgrey;
border-radius:25px;
position:relative;
}
div.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
box-shadow:0 0 10px green;
border-radius:inherit;
transition:.2s;
transform:scale(0.8);
}
div.box:hover::before{
transform:scale(1);
}
<div class="box"></div>
Having an issue with CSS transitions ignoring their parents overflow property during the transition in Chrome/Safari.
JS adding an active class to the child:
$('.child').addClass('active');
CSS for the parent/child
.parent {
position:relative;
width:250px;
height:250px;
background:#000;
border-radius:250px;
overflow:hidden;
}
.child {
opacity:0;
transition:1s opacity ease-in-out;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:blue;
width:250px;
height:250px;
&.active {
opacity:1;
}
}
Here's the fiddle: https://jsfiddle.net/b3ejm7qr/1/
During the transition, the child's content is shown outside of it's parent then disappears on completion.
Have tried adding backface-visibility with no luck.
Been trying to find the same problem but haven't had any luck... Was wondering if this is a known issue in Chrome/Safari and whether there's a fix / workaround?
Thank you!
You can have 3 solutions to your problem.
The two solutions that have already been stated as:
Add z-index: 1 to your parent.
Mention border-radius: 50% to the child.
And,
Just add the backface-visibility browser specific properties to your parent, along with the transform: translate3d properties. You have to set the translate3d properties manually due to a bug in the webkit browsers.
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
It can be browser bug . But you can give border-radius: 50% for your child element . After giving radius for child everything will for in all browsers
I added z-index to both elements, and maybe is what are you looking at. https://jsfiddle.net/b3ejm7qr/2/
If not, looks like is a bug type, as Giorgi says (Google search, first link).
I try to rotate the text by using, text-transform with transition. In firefox browser a slight jerk get happened. Check the below link, by mouse overing the text, end of the rotation you can see the slight jerk, how to avoid this?
.rot_pos{
margin:100px auto;
text-align:center;
}
.rotate{
font-size:30pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
-moz-transition:1s;
transition:1s;
}
.rotate:hover{
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<div class="rot_pos">
<div class="rotate">Sample Text</div>
</div>
http://jsfiddle.net/es86wh1p/
Any other solution??
This happens only in firefox.
I had a small play with your code in js-fiddle, it almost appears to be a bug in firefox. A quick debugging tip for things like this is to enable borders and set different colors.
I was able to find a solution, but it is so incredibly hackey that this reminds me of the 90's and the fact that mozilla firefox rose from the ashes of the netscape codebase.
First I set a parent/child tag which "Should" have caused the text to rotate when the mouse entered the rot_pos div. This still caused the text to 'trap' when the mouse hit the box that was rotating ( when causing the mouse to leave quickly, you can test this by removing the padding from rot_pos )
Setting the Z-Order of rotate to -2 shows that the rotate:hover trigger is not being triggered when it is 'behind' another div. So the quick lazy fix would be to expand the size of rot_pos so it completely covers the rotating text.
Which leads me to:
http://jsfiddle.net/rwa1pq2v/
.rot_pos{
margin:100px auto;
text-align:center;
border: 1px solid black;
padding: 100px 20px 100px 20px;
}
.rot_pos > .rotate {
font-size:31pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
transition:1s;
border: 1px solid black;
background: green;
}
.rot_pos:hover > .rotate {
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
.rotate {
z-index: -2;
}
.rotate:hover {
background: pink;
}
The issue with this is that the rotation is being triggered when the mouse enters the outer-area. So with the knowledge that a div which is "above" according to the z-order will prevent the trigger of the div below I dropped a further 2 div's over the top which can be seen as red and blue with a opacity of 0.5 in the example below:
http://jsfiddle.net/non45qy2/
With some lazy hand fiddling of sizes to ensure that they completely cover the trigger area we have my final solution..
To improve on this we could also drop a further 2 div's to cover up the 2 leftover white area's (and fix up the padding on the covered up areas) so you don't have to offset by such a large amount.
if it wasn't 1:40am I would be raising this issue as a bug with mozilla and hoping it gets fixed in the next release.
I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
http://jsfiddle.net/nun243j1/
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.
I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.
Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:
I googled it, and found an answer on SO telling someone to set
-webkit-backface-visibility: hidden;
This cleared it up, but obviously only in webkit browsers.
I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.
Any suggestions?
jsFiddle
e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.
One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)
.box.one {
-webkit-transform: perspective(999px) rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: perspective(999px) rotate(1deg);
}
fiddle
Adding an after pseudo class with negative margin seems to fix the Firefox issue.
.rough:after {
content: "";
display: block;
margin: -1px;
height: 302px;
background: black;
}
Fiddle demo: http://jsfiddle.net/Wkk7W/3/
Note that the display:block seems to be an essential part of my hack/fix.
Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.
Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.
http://jsfiddle.net/Wkk7W/6/
Set the element to position:absolute, then give it a pseudo element with:
content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;
This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.
There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.