I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared
Related
I have a weird behaviour on a website in Safari. I want to expand a menu from height 0px to height 100% with a css transition. This works properly in Firefox, Chrome and Edge. However, in Safari, there is always a breakpoint where the animation stops for a really short period, causing a laggy animation. I checked that no element is on the same z-index. I found a "fix" on a homepage, which is indicated by a comment in the css, but that does not changes anything.
.dropdown-nav{
position: fixed;
display: block;
z-index: 21;
width: 100%;
height: 0;
left: 0;
background-color: white;
top: 0;
padding: 0;
transition: height 0.6s ease-out;
-webkit-transition: height 0.6s ease-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
/* Enable hardware acceleration to fix laggy transitions */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.dropdown-nav-visible{
height: 100%;
}
In my js-script, I simply toggle the class .dropdown-nav-visible onto the .drop-down-nav
$('#nav-icon4').click(function(e){
e.preventDefault();
$(".dropdown-nav").toggleClass("dropdown-nav-visible");
$(this).toggleClass('open');
});
Here you find the laggy behaviour: https://magnavoce.ch
and here the same setup, but it works: http://dev5.raphael-rapior.com/.
I also tried using animation-duration like suggested in a similiar question on SO. I also tried removing every other part of the site, still the same.
Edit: safari 9 seems to not have this problem, but safari 12
Height transitions are heavy (they recalculate too many things at each frame), if possible you should use transform instead. Other than that, you may try to add will-change: height
ex:
.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}
.myNavActive {
transform: translateY(0%);
}
I have a series of images on-screen in bootstrap 3 panels (3 per row for large screens).
When you click on an image I have it set up so that it applies a CSS class which does a 'scale(2)' on the image, this all works fine, but I want those images to be visible and scale themselves on screen.
Images in column 1 end up slightly off-screen to the left, Images in column 3 end up slightly off-screen to the right, Images in column 2 are for the most part fine.
Ideally I would like them to scale into the centre of the viewport itself, or at least just not render off-screen at all.
CSS:
.zoom {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.zoom-click {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position:relative;
z-index:100;
border: 2px solid DarkRed;
}
Upon clicking on the image it adds/removes the 'zoom-click' class.
I have tried using 'translate' along with the 'scale' however it is relative to the image itself, have also tried using 'transform-origin'.
**Update: ** Have created a jsfiddle showing how it is at present (minus the knockoutjs code which actually creates each of the 'main-image-panel' panels.
https://jsfiddle.net/tczh1sxq/2/
Figured it out. I always seem to have difficulty at times with the more complex CSS.
Anyway, fixed it by doing:
#images > div .zoom-click { transform-origin: top; }
#images > div:nth-child(3n+0) .zoom-click { transform-origin: top right; }
#images > div:nth-child(3n+1) .zoom-click { transform-origin: top left; }
Be nice if I could get it to actually go into the centre of the viewport, but this will suffice, looks much neater now that it isn't off-screen on the edges.
this might help,
.zoom-click
{
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
You can use any height/ width you want. If the image is contained within any positioned element, you can use position: fixed and it will still work
Just an idea tried to resolve your issue. I used different tranform-origin based on child element index value as like nth-child,
$('.child').click(function(){
var index = $(this).index()+1;
if((index%3)==1){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top left'
});
}
else if((index%3)==2){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top'
});
}
else if((index%3)==0){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top right'
});
}
});
Find this fiddler for reference.
I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.
I have a bootstrap template which include a navigation bar with 3 links. Each link point to an anchor.
Each anchor is a SECTION with height set to 100%. The scrollbar is hidden so the only way to navigate to the next section is by using the navigation bar.
I want to add an animation while the anchor is change.
I setup my template and the animation but I don't understand why my DIVS goes offset instead of scrolling as expected.
My JSFiddle is https://jsfiddle.net/raffaeu/qu4skwf4/
I set the transitions as following:
#home:target{
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
#about:target{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#contact:target{
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
And this is how I set the animation for each section
section {
width: 100%;
height: 100%;
z-index:0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
I belive that in this case CSS translate is unnecessary and even plain wrong approach. Scrollbar is invented for a reason, and you should not take it away from page visitors. Also, think about mobile users.
I suggest better using jQuery.offset function and add animation, like this:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');
Are there any ways to rotate CSS 3 shapes at a certain angle?
Dabblet code here.
.shape
{
transform:rotate(150deg);
-ms-transform:rotate(150deg); /* IE 9 */
-webkit-transform:rotate(150deg); /* Opera, Chrome, and Safari */
}
Add transform:rotate to your id octagon.
Refer this link: http://davidwalsh.name/css-transform-rotate
.object {
transform: rotate(45deg);
}
You can also set the transform-origin:
object {
transform: rotate(45deg);
transform-origin: left;
}
You can change the position to left, right, top or bottom depending on how you want the object to rotate.
Hope this helps!