fadeToggle effect issue on Safari

[alegout]

Description

jQuery 3.4
Safari Version 12.1 (14607.1.40.1.4)

On safari, fadeToggle "blink" but not on Chrome, any ideas?

Code: jQuery('#selector').fadeToggle()

Thank you

Link to test case

[mgol]

Can you provide a test case on JS Bin as the issue template requested? Thanks!

[alegout]

Hello @mgol,

Sorry, voilà

EDIT: It is happening because of the use of two fadeToggle. Maybe you have a solution?

Thank you

[mgol]

Thanks for the test case! I reduced the test case to not include any external JS/CSS files: https://jsbin.com/jafisol/edit?html,css,js,output

Note: to reproduce it reliably, pop-out to a preview mode: https://output.jsbin.com/jafisol. In the default iframed view the issue doesn't always appear for me in Safari 12.1.

[mgol]

The issue is reproducible in Safari 12.1 since jQuery 3.2.0. The first bad commit: 6d43dc4 (cc @markelog).

[farazhashmi21]

No it working on my machine with chrome browser and with Linux Ubuntu OS. Faraz Hashmi On Saturday, 27 April 2019, 16:59:32 GMT+5, Alban <[email protected]> wrote: Description jQuery 3.4 Safari Version 12.1 (14607.1.40.1.4) On safari, fadeToggle "blink" but not on Chrome, any ideas? Code: jQuery('#selector').fadeToggle() Thank you Link to test case — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Manuel-Suarez-Abascal]

@mgol @farazhashmi21 @alegout I have tried in IE11 OS: Window 10 and it blinks as well. Any ideas how to fix this? I would like to work on it.

[mgol]

@Manuel-Suarez-Abascal Thanks for the info! I confirm it's broken in IE 11 in the same way and that the same commit, 6d43dc4, that broke Safari is also the first to break IE.

I don't know what's the correct fix. If you want to try, have a look at what commit 6d43dc4 changed & try to tweak relevant code until the test case in IE or Safari stops flickering.

[mgol]

I investigated it a little; I thought this is just a browser issue in IE & Safari but it turns out it's more complex. If you set window.requestAnimationFrame to null to force jQuery to go through window.setTimeout the issue is present in all browsers, including Chrome & Firefox:
https://jsbin.com/povatol/1/edit?html,css,js,output

And if you revert 6d43dc4, the issue goes away in all of them. It might be that Chrome & Firefox are just doing more optimizations in requestAnimationFrame that are avoiding this issue but it seems to be there.

We should fix that.

[Manuel-Suarez-Abascal]

@mgol Thanks for the info! I will work on it and see if I can fix this.

[alegout]

It seems to be fixed / not happening anymore.
Tried on Safari 13.0.4.