Fix for profile image upload on Microsoft Edge breaks iOS Safari and Chrome

[benjlipchak]

This is a follow-up to #7360.

I'm running BuddyPress 2.7.4. A user of my site reported that avatar uploads weren't working on iOS, and I noticed that sure enough, the moxie-shim was no longer in alignment.

I tracked it down to the recent change to avatar.min.css, which overrides the positioning as a fix for alignment on Microsoft Edge. However, it seems to break alignment on my site on iOS Safari and Chrome (as tested via Chrome's device toolbar).

.moxie-shim.moxie-shim-html5 {
	top: 108px !important;
	left: 40.1% !important;
	width: 12em;
}

This is easy enough for me to revert locally to restore proper alignment (though probably breaking MS Edge again, which I don't have to test against), but thought I'd report it here in case I'm not the only one experiencing it.

[hnla]

Those changes were admittedly a short term solution or quick fix but I did test them as far as possible in various browsers and in Chrome I don't see the issue you're describing.

We probably would need more detail before being able to tackle any solution I would need to be able to replicate the issue locally.

It may be best short term to override the styles yourself to provide a fix that works for your users. longterm as I mentioned on the other ticket probably means unpicking the build, html/css, and re-factoring it to be a little more robust.

[r-a-y]

I've seen a few support threads about this in the forums about the Microsoft Edge fix affecting mobile browsers.

Perhaps we should use an Edge CSS hack to target Edge only.

[r-a-y]

@benjlipchak - Can you try the patch above and see if it fixes things for iOS Safari? I don't have an iOS device so I cannot check.

[hnla]

Problem with hacks is they tend to point to the fragility of the original concept but if the @media query works fair dues, I perhaps should have considered something like that in the original quick fix. Given our stretched time & resources I would probably consider effects like this better toned down where smaller devices are concerned.

[mrjarbenne]

I've implemented 7416.01.patch on BP 2.8.2 and the issue still exists on Mobile Safari on iOS.

You can see in the screenshot provided the mis-aligned target when tapping on the "Select Your File" button.

[hnla]

@mrjarbenne Thanks for testing.

[r-a-y]

@mrjarbenne was able to confirm that the fix works.

The patch above only works for sites with SCRIPT_DEBUG set to true :) When we release the new version, grunt will generate the proper minified version of the CSS file.

Going to commit this.

[r-a-y]

In 11579:

Uploader: Fix the "Select your File" upload button across all browsers.

This commit does a few things:

• Properly fixes the "Select your File" button for Microsoft Edge. The changes to bp-plupload.js mirrors a similar change to wp-plupload.js (see ​#WP37039).
• Rolls back some CSS hacks to attempt to fix the upload button in Microsoft Edge (see #7360). This caused the upload button to fail in iOS Safari.

Props r-a-y, benjlipchak, mrjarbenne, hnla.

Fixes #7416.

[r-a-y]

So I figured out a way to remove all the CSS hacks we were using and to fix this at the JS level.

Thanks to everyone for helping debug this issue.

[hnla]

@r-a-y Nice one, well figured sir!