Select Box - Dropdown arrow not appearing normally on iOS6/Safari

[AmritGurung]

How to reproduce this bug:

1. Setup a basic html layout with foundation.
2. Insert a select box with few options.
3. View on iOS6/Safari.

What should happen and what happened instead:

The dropdown arrow should appear on the right hand side but it appears on the top left hand corner.

Browser(s) and Device(s) tested on:

Tested on iOS6.1.6/Safari

[AmritGurung]

I think this bug was introduced while trying to fix Fix overlapping select arrow #8704.

The select box appears fine if we get rid of the $form-spacing, added in commit af121b1.

But this will again re-introduce the Arrow overlapping text when container is floated #8685.

[kball]

@AmritGurung Thank you for the bug report. Is this using Foundation 6.3.1?

[AmritGurung]

@kball Yes, it is using Foundation 6.3.1

[brettsmason]

Hmm I've looked into this. This appears to be an issue specific to version 6 of Safari. Basically it doesn't support writing a background position like right -1rem center so is putting it top left instead. See https://stackoverflow.com/questions/16542051/css3-background-position-issue-with-safari-only

Not sure how to go about finding a solution for this...

[andycochran]

Do we support this version of iOS Safari?

[DanielRuf]

Do we support this version of iOS Safari?

I don't think so.

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

Last Two Versions

#9123 (comment)

...
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
...

[DanielRuf]

I guess we can close this then as mobile Safari 6 is very old, generally does not support background-position and is not supported by us accordig to our compatibility table.

@ncoden or what do you think?

[DanielRuf]

Will take a look later, maybe we can solve this with a small change in the Scss code.

[ncoden]

I argued about trying to support Mobile Safari for iOS 7, but v6 is definitely not supported. It works well in v7. @DanielRuf if you can find a patch that's great, but no need to loose too much time on it.

[DanielRuf]

Will try to find some time next week to test in Browserstack.

[DanielRuf]

We don't support this version by the browserlist config so I will not create a patch then =)

[DanielRuf]

#10143 (comment)

[DanielRuf]

So in this case I will close this as Safari 6 is very old and not supported by the whole framework.