safari doesn't allow the flyout menu. mobile + desktop

[mathematicalmichael]

I am noticing that safari consistently doesn't allow the flyout menu. mobile + desktop both exhibit the behavior. Desktop Safari: Version 14.1.1 (16611.2.7.1.4)
Mobile Safari: iOS 14.6

I don't see an existing issue tracking this. Basically it's just unresponsive entirely.

This person faced a similar issue it seems: https://stackoverflow.com/questions/66436744/how-to-activate-the-rtd-flyout-menu. Playing with "prevent cross-site tracking" does nothing.

Originally posted by @mathematicalmichael in #8333 (comment)

Console from Safari (when I click on the flyout menu):

Opening it in Opera shows that it works, so I think it's the browser. nothing in that console.

site: mud.rtfd.io

[stsewd]

This looks comming from

readthedocs.org/media/javascript/readthedocs-analytics.js

Line 21 in fe7fda0

function gtag(){dataLayer.push(arguments);}

. Maybe something to do with safari's built-in antitracker?

[stsewd]

From https://developers.google.com/gtagjs/devguide/datalayer we are using it like in the example. Maybe safari needs to be explicit about globals? Can you try this on your safari console (sorry, I don't use mac).

window.dataLayer = window.dataLayer || [];
dataLayer

[mathematicalmichael]

@stsewd wow that was magic.
I entered that into the console and wam-bam the flyout menu worked!

[Daltz333]

Bump. Had a user bring this up.

[Daltz333]

Another bump. This is critical functionality. This means language pop-out menu does not work on iPhone devices, which is a large portion of our viewer base.

[stsewd]

If this code works on the console #8341 (comment), then I'm not sure what the problem could be, can't debug more since I don't use safari.

[ericholscher]

I have Safari and can confirm this issue and the fix. Do we just need to put window.dataLayer = window.dataLayer || []; in our JS?

[stsewd]

Just to be clear, we do have that line in our current js

readthedocs.org/media/javascript/readthedocs-analytics.js

Line 20 in fe7fda0

window.dataLayer = window.dataLayer || [];

, we might have a syntax error (missing ; in the above statement). We will confirm this in a couple of hours.

[ericholscher]

I'm trying to reproduce this, and I can't figure out what's happening. It only appears to happen on the mud docs. I tried it on:

• RTD docs, works: https://docs.readthedocs.io/en/latest/
• Another furo theme, works: https://urllib3.readthedocs.io/en/stable/
• Mud docs built locally, works.

So I'm not really sure how to diagnose this without a bit more information. It seems to only be effecting a small number of docs sets -- is there anything you can do on your docs to stop this from happening? Or cause it to happen on other docs -- I can't really figure out the issue without being able to reproduce it.

[Daltz333]

Another case is https://docs.wpilib.org/en/stable

[ericholscher]

It looks like you've disabled google analytics on your projects? Guessing that's the issue.

[ericholscher]

The block of code that's executing isn't being run, but somehow that function is being defined:

readthedocs.org/media/javascript/readthedocs-analytics.js

Lines 20 to 21 in fe7fda0

	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}

So somehow line 20 is not being executed, but line 21 is, it seems.

The caller is:

readthedocs.org/readthedocs/core/static-src/core/js/doc-embed/sphinx.js

Lines 19 to 25 in 1962d92

	if (typeof gtag !== 'undefined') {
	// https://developers.google.com/analytics/devguides/collection/gtagjs/events
	gtag('event', 'Click', {
	'event_category': 'Flyout',
	'event_label': flyout_state,
	'send_to': 'rtfd'
	});

Which is checking for the value to be defined, which it apparently is.

[davidfischer]

Strangely only seems to affect Safari though due to a subtle difference in scope of a defined function. Regardless, should be a simple fix.

[ericholscher]

I did a PR to fix this by disabling the caller when analytics are disabled. I think there's probably a better solution if someone knows JS well, but the naive approach should solve this issue at least.

[mathematicalmichael]

I really appreciate the fix, because yes, I did disable google analytics.

Very odd that it's so Safari specific.

Thank you all so much!