I'm facing laggy width css transition (1200px to 100%) on a position:sticky div living beside a list of div items.
Chrome and Firefox runs smoothly.
The more items div on the page, the more the transition is laggy on Safari.
I've tried
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
with no success.
Any suggestion?
Related
I seem to have an issue in Chrome 83 with a duo-monitor setup (144hz primary, 60hz secondary), not sure if it's a bug with Chrome, a bug with my code, or intended behavior. I'll explain my test case first.
I've got two divs. One has a hidden iframe, we'll get to why later.
<div id="content1"></div>
<div id="content2">
<iframe id="video" hidden ...></iframe>
</div>
Both divs are the size of the viewport, with the latter one being fixed to peek out from the bottom of the viewport, appearing as a footer. The animation I want is for the footer to slide up and cover the entire viewport, and then slide back down again. I'm doing this by animating transform: translateY(); which should be performant. Here is the CSS.
#content1 {
height: 100vh;
}
#content2 {
position: fixed;
top: calc(100vh - 50px);
height: 100vh;
width: 100%;
transform: translateY(0);
transition: transform 350ms ease-in;
}
#content2[show] {
transform: translateY(calc(-100vh + 50px));
}
This is buttery smooth on my 144hz monitor, staying steady at around 144(+-10) FPS. However, dragging Chrome over to my 60hz monitor I suddenly get terrible stuttering and uneven framerate, anywhere from 200 FPS to 30 FPS.
And here is another strange thing. If I play a video in the footer div, such as by embedding a YouTube video with an iframe, suddenly the performance stays solid at 144(+-10) FPS, still on my 60hz monitor.
I've also tried with Chrome halfway between the two monitors, and this behaves the same as only having it on the 60hz. It only seems to behave properly when it's solely on the 144hz.
This issue affects all CSS transitions, I've tried it with the transform, opacity and top properties. It does however not affect scrolling performance.
Here is a codepen with the example: https://codepen.io/Ophion/full/BajJEjm Click the footer to trigger the animation, and hit space to reveal the YouTube video inside of the footer.
I'm really curious if anyone else can reproduce this issue or knows why it happens.
I use this bootstrap template.
I want make carousel background images fixed, but when I add
background-attachment: fixed;
like this
<div class="carousel-item active" style="
background-image: url('http://placehold.it/1900x1080');
background-attachment: fixed;
">
I get what I what in chrome, but in firefox it works strange.
In firefox, when slide is moving, image is not fixed. After slide stops, image is fixed. I didn't find reason why is this happening.
This is a good question. It took me a while to figure out what is going on.
Bootstrap carousel uses transform: translateX(); to do its animating.
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
Transform translate will move the fixed background image left or right, regardless if the background is fixed. Unlike position or anything else, the background image stays fixed where ever the element moves. It's a bummer.
I tried to hack it for ages, by putting an extra div with an extra child div for the background, but I could not get my head round the classes. I was trying to reverse translate the background image when the slide is transitioning to give the effect of it being fixed, but then the background image on the next slide needs to not animate. Very confusing. Not sure how this can be done with a slider that uses translate to do its animating. https://www.codeply.com/go/vzVI1YkwYc
Maybe someone clever can figure this one out.
I am creating a CSS transition that scale the inner element when the parent state is hover.
However the parent has a border-radius property that does not get forced on the actual hover itself. When the user is hovering the element there is no border-radius shown.
I figure out that has to do with the overflow, I tried to have a z-index for the parent to be higher than the child one but had no luck.
My fiddle:
https://jsfiddle.net/muLhkx9m/1/
Your issue is a known bug with the transitions and backface visibility.
To be more specific - the scale transitions often need one more "browser hack" to function properly - and that is
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
I have added this to your fiddle, to the .box element and check for yourself how it works :)
Your Updated Fiddle
I have problem with fixed background as its not rendering right in chrome 40/webkit, and after some search I found adding
-webkit-transform: translateZ(0);
fixes that, however that will break any div with
position:fixed;
Here is an example shows that the div is not fixed anymore, however the background renders just fine in the example even if translateZ(0) removed! which doesn't happen in my case.
https://jsfiddle.net/4hbj5b6e/7/
works fine on IE, Firefox...
Try using -webkit-perspective: 0; instead of -webkit-transform: translateZ(0);.
Here's your updated fiddle.
live demo: http://codepen.io/flanker/pen/ajAow
There are three elements like:
<div class="parent">
<div class="child"></div>
</div>
In the first one parent has a border-radius and child element will be overflowed. In the second one parent has a border-radius and overflow: hidden so the child is clipped. Both of them work fine.
But in the third one, the parent element has border-radius and overflow: hidden. This time I added a animation to the child element, then the overflow: hidden is not working in Chrome (Version 28.0.1500.52 beta / Mac OS X 10.8.3). The child is still be visible out of the parent element.
But it works fine in Firefox (20.0)
Is this a Chrome bug? Or am I missing any other CSS properties?
Thanks.
All you have to do is add to the parent element follow css:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
Just add overflow: hidden; to your last class?
.flash .bar {
-webkit-animation: flash 5s linear infinite;
overflow: hidden;
}
The live demo is updated with this and appears to be working in chrome.
Looks like this is fixed in Chrome 29 (Tested in Chrome Version 29.0.1547.22 beta).