A 3d rotated div cuts through another div with a higher z-index. I would like to prevent this, and force adherence to z-index definitions. I thought -webkit-transform-style: flat; would solve this. Anyone got a suggestion?
Since you have not a fiddle so that we could look around this issue, but I can point you to a link which may be useful for you to figure out the issue:
http://css3.mikeplate.com/
Related
I am struggling with a strange problem for a couple of days now. I am using big triangles in my website. I know if i make triangles in png or any other format, there is a big chance this is gonna look crispy. Thats why i go for the svg approach.
The first thing i approached was a big border under the svg elements. This was fixed by simply adding vertical-align: top; to the svg element.
The problem is that it is very buggy in some browsers. Some browsers show a line beneath it when resizing. Sometimes the line is always there.
The following image illustrates the problem, this is taking in safari 10.1 when resized:
This is how it should be
The svg are absolutely positioned i
Is there anyone who has faced this problem before and can help me out with this?
Thanks for you're help guys, really appreciate it!
I ended up with a (dirty) fix.
The elements that are aligned to the bottom i gave a transform: translate(0, 0.4px);
And the elements that are aligned to the top i gave a transform: translate(0, -0.4px);
For now this seems a good fix without disrupting the layout!
I've tried this from so many angles but can't figure it out.
See my map here: http://defendiendovidas.org/test.html
I need the country names in to appear on top of everything else. z-index isn't helping, even though my span is position:absolute.
Any pointers to achieve this would be greatly appreciated!
P.S. if anyone has a suggestion for how to build this map better, I'd be keen to hear. Thing is, I want the fade-on-hover effect. But my images are overlapping and therefore as you can see with Brazil, the hover is kind of conflicting with nearby countries (images) that are positioned "on top" of Brazil. map/area is no good because it doesn't allow for area:hover...
Thanks!
The solution is to apply the opacity to the img and not to the entire li,
since opacity and z-index are somehow connected.
Also, since you've asked if anyone has a suggestion how to make this map better, well...
Your code was really messy and you've also used lis outside of a list for some reason, so I kind of changed a lot of the HTML too.
Here's the Fiddle: Link
Hope it helps :)
I am not able to see a full map here. You have mentioned it too. Well there is also no other span found!
The map is somehow cool. But if you want the images to ride over the image. You might use the position relative!
Have you tried that? You have an absolute, but absolute works on the div or container its relative too. If there is no container having position relative the main body tag is considered to be the one. So try giving this image a relative position. Then add the z-index and absolute position!
Try Position:relative or Position:absolute
Give z-index a shot too, z-index:50
I am having an interesting problem with clipping while performing a 3d rotation. I am rotating an element using :
-webkit-transform: rotate3d(0, 1, 1, 180deg);
During the animation it looks fine in Chrome, Firefox, and any other browser except for Safari.
The window is clipping through the elements behind it.This shouldn't be a z-index issue as I have assigned proper z-index to these elements.
Anyone know what could be causing this to happen just in Safari?
This is what is looks like in Safari during animation:
And properly animated in Chrome
Thanks!
Try setting the container of the rotated modal transform-style: flat and a new perspective. You need to change 3D rendering context.
This is related answer https://stackoverflow.com/a/18167565/1663572 -- but you probably don't want to change the position on Z axis as it changes the appearence dramatically. I couldn't use it also.
It's been a while, but I had the same issue, and actimel linked to an elegant workaround. (Though as they stated, it'll only work the background elements aren't already transformed 3D.)
Add these two lines to the background elements (or a container with those elements inside, or a class that all of those elements are part of):
-webkit-transform: translateZ(-1000px);
-webkit-perspective-origin: 100% 100% none;
Good luck future readers! :)
It could be that in the version of safari you are using, z-index is not well supported Check can I use.com
I think I'm going to tear my hair out if I don't figure this out.
http://www.keystoneelderlaw.com/
If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?
I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.
Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.
RESOLVED:
Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".
I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.
In your css add property to #slide
#slide
{
z-index:-999
}
it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp
Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.
Is there any thing I can do about this?
You could check out the answer to the question css transform, jagged edges in chrome
Helped me out
From the accepted answer:
In case anyone's searching for this later on, a nice trick to get rid
of those jagged edges on CSS transformations in Chrome is to add the
CSS property -webkit-backface-visibility with a value of hidden.
In my own tests, this has completely smoothed them out. Hope that
helps.
It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.
You can try adding a border the same color as your background to try to minimise the effect.
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);
Does the trick for chrome.
Have you tried the CSS rule -webkit-transform-style: preserve-3d;?
You could also try rotating the specific axis with -webkit-transform: rotateZ(-5deg);.
I encountered this issue on Chrome 33 (Windows 7). I tried all the suggested fixes on this page. Misery ensued. My rotation was pretty simple:
transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
I found this answer and after some quick experimentation I found that the following combination works perfectly in Chrome:
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
I haven't tested cross browser yet. I have no idea which further bugs this introduces. You have been warned. Hope this points someone in the right direction.
Side note: During my experiments I found that -webkit-backface-visibility: hidden; (on its own) removed the antialiasing from untransformed images.
This is a WebKit bug that has been already fixed and the fix shall appear in Chrome 15.
The workaround until everyone updates to 15+ is to apply -webkit-backface-visibility: hidden; to the element being rotated. Worked for me. That triggers antialiasing on the element.
You can add box-shadow to your images with the same color as your background, that reduce the effect.
example:
http://antialiasing-webkit.qip.li/edit/
This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra <div>, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.
You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/
The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.
The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.
For me it was the perspective CSS property that did the trick:
-webkit-perspective: 1000;
Completely illogical in my case as I use no 3d transitions, but works nonetheless.