Skip to:

Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#7416 closed defect (bug) (fixed)

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

Reported by: benjlipchak's profile benjlipchak Owned by: r-a-y's profile 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 7 years ago.

Download all attachments as: .zip

Change History (16)

#1 @hnla
8 years 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
7 years ago

  • Milestone changed from Awaiting Review to 2.9

#3 @r-a-y
7 years 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.

7 years ago

#4 @r-a-y
7 years 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
7 years 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.

7 years ago

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

7 years ago

#8 @mrjarbenne
7 years 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
7 years ago

@mrjarbenne Thanks for testing.

#10 @r-a-y
7 years ago

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

Last edited 7 years ago by r-a-y (previous) (diff)

#11 @r-a-y
7 years ago

  • Version set to 2.7.3

#12 @r-a-y
7 years 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
7 years 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
7 years ago

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

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

7 years ago

Note: See TracTickets for help on using tickets.