Foundation-sites: Off-Canvas Flashing Animation in Firefox

[katie1348]

What should happen?

On an Off-Canvas Push, the screen should show a smooth animation.

What happens instead?

The screen flashes as the animation proceeds. This happens in Firefox 61.0.1 (64-bit), the animation is smooth in Microsoft Edge. The Overlap version is smooth and works fine.

Possible Solution

Unknown

Test Case and/or Steps to Reproduce

Test Case: Go to the Off-Canvas documentation https://foundation.zurb.com/sites/docs/off-canvas.html and press the Demo buttons in the "Multiple Panels" or "Off-canvas Transitions" sections.

How to reproduce:

1. Go to https://foundation.zurb.com/sites/docs/off-canvas.html
2. Scroll to the Multiple Panels section
3. Press the Open Right Menu button.

Context

I would like to use the push animation for menus.

Your Environment

• Foundation version(s) used: Default for documentation, which I think is 6.5.0.RC2
• Browser(s) name and version(s): Firefox 6.0.1 64bit
• Operating System and version (desktop or mobile): Windows 10 Pro, x64

Checklist (all required):

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title is descriptive.
• [x] The template is correctly filled.

[SassNinja]

@katie1348 thanks for reporting this!

But I'm unable to reproduce it. I've just tested the docs page in FF 61.0.1 without problems – the animation was super smooth.

What OS are you using?
(I've tested on macOS High Sierra)

[katie1348]

I am using Win 10 Pro, the x64 version, 1803 with OS Build 17134.191, which I believe is the latest as of this morning.

[katie1348]

I have just updated Firefox to 6.0.2 and the same happens. Computer has been rebooted etc.

[Ph0tonic]

I have the same issue also with Firefox developer 62.0b17 (64 bits) on Windows 10.

[katie1348]

Then this might help, I have an nVidia graphics card, running the 398.82 drivers.

I am assuming that this is all being hardware accelerated as all modern browsers do.

[ncoden]

I am unable to reproduce the issue with Firefox 61.0.2 on macOS 10.13.6 (17G65). I also tested on Browser Stack: Firefox 61.0.0 on Windows 10.

[ncoden]

@katie1348 Could you provide a video of the "flash" ?

[Ph0tonic]

Here it's.
But I haven't any lags with Chrome, Opera and Edge.
20180815_212526.zip

[katie1348]

OK, I have done a video of the opening and the closing. It shows the flashing as it happens.
2018-08-15 20-45-20.zip

Let me know if you need more info.

Edit: I do not see any problems in either Internet Explorer or Microsoft Edge.

[DanielRuf]

Was this also happening in an older Firefox version?
You can test it with https://portableapps.com/de/apps/internet/firefox_portable or MozRegression https://mozilla.github.io/mozregression/

[katie1348]

On a second computer, which does have the latest version of Firefox portable (via portable apps) 61.0.2 (64 bit) does the flashing animation.

Curiously, on the first run, when the animation finished, the main content part of the screen was blank, but the buttons reappeared when moused over.

[DanielRuf]

@katie1348 can you test with MozRegression since when we have this issue or if this was generally always an issue with Firefox?

[DanielRuf]

Because I think that it is a similar issue to https://github.com/zurb/foundation-sites/issues/10924 since they changed a few things in 58+.

[katie1348]

@DanielRuf, I'm sorry, I don't know how to use MozRegression, as I don't know what build if any works and it looks like it is some kind of diff tool. It looks like it will compare a known Good and a known Bad build and show the differences.

If you have any help on it working a different way, I am prepared to give it a try.

My developer version of Firefox also shows the same behavior 62.0b17.

I have only recently started to use Firefox in earnest and have also only recently had an interest in the Off-Canvas, so I have not really ever looked at it in Firefox before.

[katie1348]

I don't know if this is the same bug as #10924, I suspect that it is different, as looking at that, and trying all the browsers, it does genuinely seem to be resolved (not that I could reproduce it).

[DanielRuf]

I don't know if this is the same bug as #10924, I suspect that it is different, as looking at that, and trying all the browsers, it does genuinely seem to be resolved (not that I could reproduce it).

This specific one was already fixed in 59 or 60 afaik.

If you have any help on it working a different way, I am prepared to give it a try.

I guess you use Windows.
I'll write down a full tutorial this evening and also test on my notebook at home then.

Can you open about:support and check what is written at the right side of AzureCanvasAccelerated?

[katie1348]

I can do better than that, here is the complete section, in case something else matters here.

Diagnostics

• AzureCanvasAccelerated 0
• AzureCanvasBackend direct2d 1.1
• AzureCanvasBackend (UI Process) skia
• AzureContentBackend direct2d 1.1
• AzureContentBackend (UI Process) skia
• AzureFallbackCanvasBackend (UI Process) cairo
• GPUProcessPid 20252
• failures GP+[GFX1-]: Failed to create render target texture: 0x80070057

I included it all, as there was something in the failures section.

If you need more info, I can provide.

[DanielRuf]

AzureCanvasAccelerated 0

So it seems there is no hardware acceleration enabled on your device. This might be the cause.

If I enable this, I can still not see this issue in Firefox 61 stable. This is what I have there after disabling hardware acceleration:

AzureCanvasAccelerated  0
AzureCanvasBackend  skia
AzureContentBackend skia
AzureFallbackCanvasBackend  none
TileHeight  1024
TileWidth   1024

[DanielRuf]

Will test the same settings with Windows 10.

[katie1348]

Frankly, I am surprised that Firefox is not using the hardware acceleration, as I have a 1070Ti graphics card, which one would imagine is up to rendering a web page.

How do I enable the hardware acceleration? And then I can test with that too.

[DanielRuf]

You can enable it in about:preferences at performance.
https://support.mozilla.org/en-US/kb/hardware-acceleration-and-windowblinds-crash

The box should be checked. The "recommended" setting may be problematic. Or the graphics card setting of your device (does it have two graphics cards - eg the CPU and what is written there in about:support at Graphics - GPU 1 enabled?) is problematic.

[katie1348]

Frankly, I am surprised that Firefox is not using the hardware acceleration, as I have a 1070Ti graphics card, which one would imagine is up to rendering a web page.

How do I enable the hardware acceleration? And then I can test with that too.

[katie1348]

OK, I have disabled hardware acceleration in Firefox and the animation is smooth. The when the recommended settings are re enabled, the flashing of the page returns.

As you suspected, the Recommended setting was ticked and when I unticked it, the

• Use hardware acceleration when available - is ticked
• Use hardware acceleration when available - 4 default

There is only ONE (1) GPU in the system. The output from Firefox for GPU 1 is

GPU 1

• Active Yes
• Description NVIDIA GeForce GTX 1070 Ti
• Vendor ID 0x10de
• Device ID 0x1b82
• Driver Version 24.21.13.9882
• Driver Date 7-30-2018
• Drivers C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumdx.dll C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nv_dispi.inf_amd64_52ac7eb8f32780d5\nvldumd.dll
• Subsys ID 00000000
• RAM 8192

I am unsure if this additional detail is helpful.

[DanielRuf]

Ok, thanks for the information.

I guess we can not do much here.
I suggest to create a bug report at https://bugzilla.mozilla.org/

[katie1348]

Bug report opened at Bugzilla as requested.

https://bugzilla.mozilla.org/show_bug.cgi?id=1483842

It is Bug 1483842.

[katie1348]

This has now been confirmed by the Firefox team as a Firefox bug, affecting 61, 62, and 63.

[DanielRuf]

This has now been confirmed by the Firefox team as a Firefox bug, affecting 61, 62, and 63.

Thanks for the update.

[kosmiq]

Does anyone still have this issue?

The latest comment on the bug tracker suggests it is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1483842

I am also unable to reproduce it on MacOS, Foundation 6.5.3, Firefox 70.0.b8.

If noone else can reproduce we can close this. @DanielRuf

[DanielRuf]

I can also not reproduce it anymore so I will close this issue.