Safari bug?

[SimonWpt]

This is a mysterious Expand-Collapse-bug with Safari. Because it is a customer site I use a short url. All actions are done with mouse clicks.

1. Open https://agnt.eu/ghwmm
2. Click left menu icon
3. Expand Warenkunde
4. Click on Das Messerhandwerk
5. Now go back via BROWSER BACK
6. Collapse Warenkunde
7. Expand Warenkunde

Now sub menu expands and collapses automatic infinite without any user action.

[SimonWpt]

It seems to me, that safari is the only browser, which saves the view state of a dropdown. When going back in Safari via browser back the state is expanded. In all other browers, the state is reseted to collapse.

[ralts00]

Its true :(

[coreysyms]

I have seen this too in the wild, I have overridden this in the past with jQuery to fire a page reload if event.persisted exists, but this is not a universal solution as most people would prefer not to reload the page. I had to do this because even targeting the menu to close via classes did not work. Only a hard reload worked.

Safari's handling of bfcache could be preferable for most things, but in this case we would rather not save the state of the DOM. A case specific solution for just this plugin would be the way to go, we just need to be careful not to effect other DOM elements that are preferably cashed. The team should discuss a solution

[stuartstarrs]

This also appears to be just the latest versions of Safari.
I can't replicate this on Version 8.0.8 (10600.8.9) for example.

[KnightYoshi]

Just thought I'd add my input. I can't recreate this in Safari 10, so in at least Safari 10 this isn't an issue; I'm also on macOS Sierra.

[kball]

@coreysyms it sounds like you have a sense of what is going on here - I'm not super familiar with bfcache and how it works... is there an event we can listen for here and trigger a reset? Are there any other components where this would make sense?

[DanielRuf]

https://coderwall.com/p/3t6ila/disable-the-back-forward-cache-of-firefox-and-safari

https://foundation.zurb.com/sites/docs/compatibility.html

[DanielRuf]

We support the following browsers by the browserslist config:

npx browserslist
npx: Installierte 3 in 2.257s
and_chr 64
and_ff 57
and_qq 1.2
and_uc 11.8
android 62
android 4.4.3-4.4.4
android 4.4
android 4.2-4.3
android 4.1
android 4
android 3
android 2.3
baidu 7.12
bb 10
bb 7
chrome 64
chrome 63
edge 16
edge 15
firefox 58
firefox 57
ie 11
ie 10
ie 9
ie_mob 11
ie_mob 10
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 10.0-10.2
ios_saf 9.3
ios_saf 9.0-9.2
ios_saf 8.1-8.4
ios_saf 8
ios_saf 7.0-7.1
op_mini all
op_mob 37
op_mob 12.1
opera 50
opera 49
safari 11
safari 10.1
samsung 6.2
samsung 5

[DanielRuf]

I guess we should update the supported Safari versions as 7, 8 and 9 are quite old and not the last 2 versions.

[DanielRuf]

The browserslist config should be

last 2 versions
ie >= 9
Android >= 2.3

Which results in

and_chr 64
and_ff 57
and_qq 1.2
and_uc 11.8
android 62
android 4.4.3-4.4.4
android 4.4
android 4.2-4.3
android 4.1
android 4
android 3
android 2.3
baidu 7.12
bb 10
bb 7
chrome 64
chrome 63
edge 16
edge 15
firefox 58
firefox 57
ie 11
ie 10
ie 9
ie_mob 11
ie_mob 10
ios_saf 11.0-11.2
ios_saf 10.3
op_mini all
op_mob 37
op_mob 12.1
opera 50
opera 49
safari 11
safari 10.1
samsung 6.2
samsung 5

[DanielRuf]

I can't recreate this in Safari 10, so in at least Safari 10 this isn't an issue

That's the same result that I got when I tested in our browserstack instance. All versions before 10 have this issue as far as I know.

As this is a browser specific bug and a known one it should be probably handled in projects, not in the framework (or we would end up adding fixes and workarounds for quirks and bugs in old browsers).

@ncoden what do you think should we do with this issue?

[Aetles]

As this is a browser specific bug and a known one it should be probably handled in projects, not in the framework (or we would end up adding fixes and workarounds for quirks and bugs in old browsers).

I'm not saying that the framework should fix every strange, obscure bug in old browsers, or even this specific bug, but in general I do appreciate when framework work around the most common quirks. In fact, that's one of the reasons I use Foundation; to have a rock solid grid, a normalized look and some well tested, cross-browser working components so I can concentrate on the creative process.

[DanielRuf]

@ncoden what do you think? Imo we should not add more workarounds for such quirks in older browsers, but this is just my opinion.

[SimonWpt]

Such decisions should not be made on the basis of gut instinct. Is there no official roadmap?

[DanielRuf]

Is there no official roadmap?

Sure, there is one: https://github.com/zurb/foundation-sites/wiki/Project-Roadmap

[DanielRuf]

Closing for now. We should not use special workarounds for a few outdated browsers.