Welcome Guest, Not a member yet? Register   Sign In
Performance of CSS Transitions
#1

I've been working on a new website template, and it incorporates one of those off-canvas type menus. I got the idea from Youtube, because I really liked how their menu worked. So, I set out to more or less copy it using Bootstrap 4, plain javascript, and FontAwesome for icons.

Preview is currently available at suvovu.com

There's not much going on in the way of transitions, and the menu normally shows/hides well. My observation is that if I leave the page sitting idle for a half minute, then the next time the transition is done it is super choppy. This only happens on my desktop computer, and doesn't seem to affect the Android or IOS devices I've tried. Is this choppiness related to the desktop computer's GPU going idle or something?

Anyways, if you take a look at the preview and have any feedback, I'm interested to hear what you've got to say.

--Brian;
Reply
#2

(This post was last modified: 03-03-2018, 04:59 AM by jreklund.)

I have tried your preview/demo application and I can't replicate the problem. So try updating your graphics drivers.

* Google Chrome 64.0.3282.186 (Stable) (64-bit)
* Firefox 58.0.2 (64-bit)
* Microsoft Edge 41.16299.248.0

Intel i7-6700K @ 4 Ghz
32 GB RAM
Nvidia 780 GTX (390.65)

Windows 10 Home
Version: 1709
OS-version: 16299.248
Reply
#3

(03-03-2018, 04:59 AM)jreklund Wrote: I have tried your preview/demo application and I can't replicate the problem. So try updating your graphics drivers.

* Google Chrome 64.0.3282.186 (Stable) (64-bit)
* Firefox 58.0.2 (64-bit)
* Microsoft Edge 41.16299.248.0

Intel i7-6700K @ 4 Ghz
32 GB RAM
Nvidia 780 GTX (390.65)

Windows 10 Home
Version: 1709
OS-version: 16299.248

I'm pretty sure if I had your hardware I wouldn't be having the problem, but after testing it on other machines I've come to the same conclusion, that it's related to the hardware/firmware of the graphics card. Being that I'm on Ubuntu Linux, this is especially difficult to deal with, and they've had a history of issues that I should have thought about before posting.
Reply
#4

(03-03-2018, 08:48 AM)skunkbad Wrote: I'm pretty sure if I had your hardware I wouldn't be having the problem, but after testing it on other machines I've come to the same conclusion, that it's related to the hardware/firmware of the graphics card. Being that I'm on Ubuntu Linux, this is especially difficult to deal with, and they've had a history of issues that I should have thought about before posting.
I can test with my Windows 8 tablet later if you wan't. If you want weaker hardware. :-)
In my experience all jerkiness on websites are due to faulty graphic cards or drivers. If it works on other hardware.
Reply
#5

(03-03-2018, 02:24 PM)jreklund Wrote:
(03-03-2018, 08:48 AM)skunkbad Wrote: I'm pretty sure if I had your hardware I wouldn't be having the problem, but after testing it on other machines I've come to the same conclusion, that it's related to the hardware/firmware of the graphics card. Being that I'm on Ubuntu Linux, this is especially difficult to deal with, and they've had a history of issues that I should have thought about before posting.
I can test with my Windows 8 tablet later if you wan't. If you want weaker hardware. :-)
In my experience all jerkiness on websites are due to faulty graphic cards or drivers. If it works on other hardware.


I don't think it'll be necessary to have you test on your other computer. I wonder though, if this problem would affect enough users that a good percentage would think something is wrong with the website when they encounter CSS transitions. I'm just saying that I think most people would blame the website, and not realize it was their computer. On the other hand, all of the mobile devices I tested did fine, and statistics say they are the majority now...
Reply
#6

(03-03-2018, 04:08 PM)skunkbad Wrote: I don't think it'll be necessary to have you test on your other computer. I wonder though, if this problem would affect enough users that a good percentage would think something is wrong with the website when they encounter CSS transitions. I'm just saying that I think most people would blame the website, and not realize it was their computer. On the other hand, all of the mobile devices I tested did fine, and statistics say they are the majority now...


If a normal user encounters a website that have these kind of problems and not all other website, they are going to blame you. They don't have enough knowledge.
 
So you don't have these kind of problem on other websites?
There are a similar function on this admin theme. On the cogwheel in the top right corner.
https://adminlte.io/themes/AdminLTE/index2.html
Reply
#7

(03-03-2018, 05:21 PM)jreklund Wrote: So you don't have these kind of problem on other websites?
There are a similar function on this admin theme. On the cogwheel in the top right corner.
https://adminlte.io/themes/AdminLTE/index2.html

I waited to respond so I could check the same computer. Actually, to my surprise, I'm not really seeing the problem with the transition at the link you shared. Maybe just a little, but not as bad as mine. I did try to change the easing to ease-in-out to match what they did, and also tried changing the transition timing a bit, but it didn't make a difference. Do you think since I am transitioning the overlay at the same time this might be why it's worse? Two transitions at the same time is bad?
Reply
#8

I'm going to say maybe on that one... I haven't looked at the code in detail. But as you said, the only difference are ease-in-out and multiple transitioning. You can absolutely do two transitions at the same time.

I'm using this one. There are a overlay fading and opening of a modal in this demo, see if it's lagging.
https://adminlte.io/themes/AdminLTE/page...odals.html

The only thing that differs (if you don't count position, color...) are that they specify all web browser standards.
Code:
-webkit-transition: right .3s ease-in-out;
-o-transition: right .3s ease-in-out;
transition: right .3s ease-in-out;
Reply
#9

(03-05-2018, 11:22 AM)jreklund Wrote: I'm using this one. There are a overlay fading and opening of a modal in this demo, see if it's lagging.
https://adminlte.io/themes/AdminLTE/page...odals.html

Now I'm seeing some performance issues .
Reply




Theme © iAndrew 2016 - Forum software by © MyBB