Skip to:

Opened 18 months ago

Closed 13 months ago

Last modified 13 months ago

#7416 closed defect (bug) (fixed)

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

Reported by: benjlipchak Owned by: r-a-y
Milestone: 2.9 Priority: normal
Severity: normal Version: 2.7.3
Component: Core Keywords: has-patch


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.

Attachments (1)

7416.01.patch (1.6 KB) - added by r-a-y 14 months ago.

Download all attachments as: .zip

Change History (16)

#1 @hnla
18 months ago

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.

#2 @DJPaul
17 months ago

  • Milestone changed from Awaiting Review to 2.9

#3 @r-a-y
14 months ago

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.

14 months ago

#4 @r-a-y
14 months ago

  • Keywords has-patch added

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

#5 @hnla
14 months ago

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.

This ticket was mentioned in Slack in #buddypress by hnla. View the logs.

14 months ago

This ticket was mentioned in Slack in #buddypress by r-a-y. View the logs.

13 months ago

#8 @mrjarbenne
13 months ago

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.

#9 @hnla
13 months ago

@mrjarbenne Thanks for testing.

#10 @r-a-y
13 months ago

@mrjarbenne was able to confirm that the fix works.

The patch above only works for sites with SCRIPT_DEBUG set to true :)

Going to commit this.

Version 1, edited 13 months ago by r-a-y (previous) (next) (diff)

#11 @r-a-y
13 months ago

  • Version set to 2.7.3

#12 @r-a-y
13 months ago

  • Owner set to r-a-y
  • Resolution set to fixed
  • Status changed from new to closed

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.

#13 @r-a-y
13 months ago

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.

#14 @hnla
13 months ago

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

This ticket was mentioned in Slack in #buddypress by hnla. View the logs.

13 months ago

Note: See TracTickets for help on using tickets.