On Windows, animations feel glitched with IE and Mozilla Firefox

[antoninadert]

Tested on Windows 7:
This is recorded on Mozilla

the feel is even worse on IE:

For some reason it works perfectly on Chrome.

I also have a Mac and it has no glitch either, everything is smooth.

I believe it would be nice to find a way to have a smooth animation for all major devices.

Is someone with me to investigate?

[TotomInc]

I think the best thing to do is remove the animation for IE, maybe also for Firefox.

[rhyneav]

Classic Internet Explorer, ruining the fun ;)

But I'm surprised it looks glitched on Firefox.

[antoninadert]

I don't think removing the animation is a good solution. Maybe investigate on an animation that doesn't glitch

[afzalsayed96]

I don't see a glitch in firefox on my PC

[TotomInc]

Can you give more info @afzalsayed96, OS and Firefox version?

[afzalsayed96]

@TotomInc Windows 10, Firefox Quantum 57.0.2 (64-bit)

[antoninadert]

@TotomInc I tested it on Windows 7, Firefox Quantum 57.0.2 (64 bit)

[antoninadert]

Just for info it doesn't feel glitchy on buttons, only cards with a lot of text...

[koester]

@antoninadert do cards still feel glitchy after the 1.4.0 release? I just tested in FF and it doesn't feel glitchy, but I'm also not on Windows 7 right now, so could you test this again?

[antoninadert]

Hello, Yes basically it is still the same on cards, even if it's not so bad, it only feels bad if I mouse in and out quickly.

Cheers

[TotomInc]

Isn't this issue mostly related to browser or computer? Like @afzalsayed96 I don't have any glitch like you explained @antoninadert. It can be related to Windows itself too (especially when you change Windows settings about performance and rendering).

[antoninadert]

Well ideally it should work fine on all kind of machines, my computer specs:

------------------
System Information
------------------
   Operating System: Windows 7 Enterprise 64-bit (6.1, Build 7601) Service Pack 1 (7601.win7sp1_ldr.170913-0600)
           Language: English (Regional Setting: English)
System Manufacturer: Dell Inc.
       System Model: Latitude E5570
               BIOS: BIOS Date: 12/22/16 06:36:59 Ver: 1.11.4.00 
          Processor: Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz (8 CPUs), ~2.7GHz
             Memory: 16384MB RAM
Available OS Memory: 16020MB RAM
          Page File: 13651MB used, 18385MB available
        Windows Dir: C:\windows
    DirectX Version: DirectX 11
DX Setup Parameters: Not found
   User DPI Setting: Using System DPI
 System DPI Setting: 120 DPI (125 percent)
    DWM DPI Scaling: UnKnown
     DxDiag Version: 6.01.7601.17514 32bit Unicode

---------------
Display Devices
---------------
          Card name: Intel(R) HD Graphics 530
       Manufacturer: Intel Corporation
          Chip type: Intel(R) HD Graphics Family
           DAC type: Internal
         Device Key: Enum\PCI\VEN_8086&DEV_191B&SUBSYS_06DF1028&REV_06
     Display Memory: 4095 MB
   Dedicated Memory: 2220 MB
      Shared Memory: 1875 MB
       Current Mode: 2560 x 1440 (32 bit) (59Hz)
       Monitor Name: Generic PnP Monitor
      Monitor Model: DELL P2418D
         Monitor Id: DELD0C1
        Native Mode: 2560 x 1440(p) (59.951Hz)
        Output Type: Displayport External
        Driver Name: igdumdim64.dll,igd10iumd64.dll,igd10iumd64.dll,igdumdim32,igd10iumd32,igd10iumd32
Driver File Version: 20.19.0015.4483 (English)
     Driver Version: 20.19.15.4483
        DDI Version: 11
       Driver Model: WDDM 1.1
  Driver Attributes: Final Retail
   Driver Date/Size: 1/4/2017 04:57:02, 39863888 bytes

          Card name: Intel(R) HD Graphics 530
       Manufacturer: Intel Corporation
          Chip type: Intel(R) HD Graphics Family
           DAC type: Internal
         Device Key: Enum\PCI\VEN_8086&DEV_191B&SUBSYS_06DF1028&REV_06
     Display Memory: 4095 MB
   Dedicated Memory: 2220 MB
      Shared Memory: 1875 MB
       Current Mode: 2560 x 1440 (32 bit) (59Hz)
       Monitor Name: Generic PnP Monitor
      Monitor Model: DELL P2418D
         Monitor Id: DELD0C1
        Native Mode: 2560 x 1440(p) (59.951Hz)
        Output Type: Displayport External
        

[antoninadert]

I agree it is not like a major issue, but still it's annoying

[TotomInc]

Not a big issue but I agree it's annoying. However we need to know if more people have this error. By looking at your specs (which are really fine), there could be a lot of factors which Windows can involve in web-browser rendering. For my case, both on Windows and MacOS, I've never seen this glitch.

The best thing to do, in your case, is maybe creating a VM with a Windows or Linux and see if the error is still present. This can help to know if the issue is related to your OS and/or some special settings you could have changed in your Windows. I really doubt it's an hardware related issue.

[antoninadert]

I have a Windows 10 computer at home I will try. I don't have any VM setup currently and no memory space

[koester]

I justed tested FF, Edge & IE10 on Windows 7 and in all three the transitions were really smooth. No glitching or jagged text like in your gifs.

I dont see how this could be connected to Windows 7, or any OS, in gerneral. Did you maybe change your GPU settings thats causing performance issues in browsers now?

Could you record your performance in FF when hovering over the cards? You can do this by opening the developer tools (F12) and going to the "Performance" tab. In my test I had steady 60 FPS. Even when hovering in and out really fast. Do your FPS drop below 60 when hovering over the cards?

[antoninadert]

As well I notice it appears more on the longest cards, and it's almost unnoticeable on the shortest.

I tried your test and I got between 60 and 54 fps (quite good!)

The bug is not in the FPS drop, it is that the text seems to move very slightly when I go in and out of the card.

Haha this one will be hard to tackle

[koester]

Oh OK. That sounds like a problem with rendering the css transforms properly. Magic backface-visibility: hidden on the cards container could help with rendering.

[TotomInc]

I wasn't aware of this property, are you working on a fix @koester ?

[koester]

I cant reproduce the bug myself so I'm just guessing. 😄

@antoninadert can you test again here: https://deploy-preview-135--astronaut-pig-36111.netlify.com/docs/components/cards/ ? In FF this should fix the problem.

[antoninadert]

Indeed it is fixed in FF with this ! WIN

But IE is more picky lol

[TotomInc]

@koester looks like will-change property is not supported in IE 11, while backface-visibility seems to be supported on a lot of browsers.

[koester]

Yeah I knew will-change is not supported in IE. We could change the shadow :hover for IE, but I don't know if its worth the effort, since this is not a breaking bug. I would leave major browser hacks out, atleast for now. We can still refactor at a later time, when we really need any browser hacks.
Maybe IE will catch up 😆

But its working in FF atleast 🎉

[koester]

Ok, I think it should work now in IE, too. Without any specific browser hack.
I changed @mixin translate a bit to adjust the cards :hover transition.

@antoninadert just one more IE test, please? 💃
https://deploy-preview-135--astronaut-pig-36111.netlify.com/docs/components/cards/

[antoninadert]

I tried on IE but it still does the glitch (some text row move a little)

[TotomInc]

IMO it's not a big deal for IE, there are a lot of properties that are not available/working on IE, even with some polyfills or hacks. What are your thoughts @koester ?

[antoninadert]

haha I hate IE as well 🗡️

[koester]

At least we fixed it for FF, that was the important one. We should leave IE as is for now. It's not worth the effort right now imho

[antoninadert]

agreed ! a good thing would be more components.