Skip to:
Content

Opened 19 months ago

Closed 19 months ago

Last modified 13 months ago

#7360 closed defect (bug) (fixed)

Can't upload profile images in Microsoft Edge browser

Reported by: angeljs Owned by: hnla
Milestone: 2.7.3 Priority: normal
Severity: normal Version: 2.7.2
Component: Core Keywords:
Cc:

Description

After making this post:
https://buddypress.org/support/topic/cant-upload-profile-images-in-internet-explorer/
I was asked to create a ticket here.

Clicking on the browse image does not work in the Microsoft Edge browser, although it works in Internet Explorer and other browsers. Members using Edge cannot upload profile or cover images.

Attachments (1)

7360-rough-pass.patch (671 bytes) - added by hnla 19 months ago.

Download all attachments as: .zip

Change History (21)

#1 @hnla
19 months ago

Confirmed as an issue.
IE < Edge appear to work ok.

On first glance feels like the click event not firing and may be associated with this plupload bug report:
https://github.com/moxiecode/plupload/issues/1343

Going to look further and hope that it's a case of maybe needing to update plupload?

#2 @DJPaul
19 months ago

  • Milestone changed from Awaiting Review to 2.7.3

I"m provisionally moving this into 2.7.3, we have another ticket that does need to come out prior to 2.8, and breaking a key feature for an entire browser does seem like something we should fix quicker. :)

@hnla What version of WordPress was your test site using? Plupload comes with WP, and I'm wondering if you were on WP 4.7 trunk/beta/rc etc, because they may have updated it there.

#3 @DJPaul
19 months ago

@angeljs Thank you very much for the report. We're looking into it.

#4 @hnla
19 months ago

Confirmed drag 'n' drop works as expected.

@djpaul I'm on bleeding edge for both WP/BP but hadn't updated WP so will check that just in case.

We have an fairly extensive file managing bp-plupload, this has code matching to that which was in bug report so may need to test those suggested changes.

#5 @hnla
19 months ago

@djpaul downloaded and updated the core WP plupload js files `(plupload-full.min.js) v2.2.0 and this appears to correct issue, this is not a conclusive test as the files between WP & plupload package seem to differ slightly.

This WP trac ticket identifies the same issue (or very similar) but looks like it addresses a specific use case?:
https://core.trac.wordpress.org/ticket/37039

This does however appear to be a WP core issue to deal with in terms of updating core vendor files.

#7 @hnla
19 months ago

And missed the fact we have had an extensive ticket on this and other issues with respect to our plupload implementation:
#6846

This suggested things were fixed!

Not sure my suggestion or WP ticket to update to update Plupload vendor files is valid frankly, we need to digest the fixes we added and comments on this previous BP ticket.

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


19 months ago

#9 @slaFFik
19 months ago

https://wordpress.slack.com/archives/buddypress/p1479932039001391

It would be very interesting to know if it is new in 2.7 (did it work in 2.6?), or whether its dependant on WP 4.6 vs 4.7, or combinations thereof.

#10 follow-up: @hnla
19 months ago

Just tested versions tracking back to 2.4.0 to see if the upload button worked in Edge but appears not to in all cases, also pretty sure it isn't as simple as latest plupload as reverting that didn't instantly revert to the issue so feels intermittent in nature, also now don't think it's the CSS overlay but feels more to do with binding the click event.

Edit In testing just noticed that the click event area is off set from the button rendering/positioning, click outside the button top edge and file explorer will open or should open.

If this is correct it's the same issue we thought we had fixed in #6846 so we'll need to revist that ticket and look again at the fixes and CSS.

#11 in reply to: ↑ 10 @mercime
19 months ago

Replying to hnla:

If this is correct it's the same issue we thought we had fixed in #6846 so we'll need to revist that ticket and look again at the fixes and CSS.

+100. I disabled bp-core/css/avatar.css and the input field now works on Mouse click, Keyboard (Enter and Spacebar), and Touch screen.

Last edited 19 months ago by mercime (previous) (diff)

#12 @hnla
19 months ago

Adding a rough patch as a workaround.
Issue essentially is stacking contexts are - as always in IE - different to other modern browsers, and the positioning of the shim is not aligned to the actual input button.

Patch manipulates the inline top property applied to the shim to match to our button, left property value with % unit to allow some degree of text resizing and adds widths to our button and shim input.

This works... more or less Edge stacking context is wrong so we lose the hover effect but re-stacking the elements means click event is hidden.

Quick check in Firefox and we still have functionality there, for the moment this is as far as I have time for but honestly to really sort this out the markup needs re-ordering so that elements are children not separated and forced positioned which is fragile.

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


19 months ago

#14 @mercime
19 months ago

honestly to really sort this out the markup needs re-ordering so that elements are children not separated and forced positioned which is fragile.

Agreed. Needs a11y fix.

#15 @hnla
19 months ago

@mercime if we do tackle that then we'll likely need a little time on it as this sort of markup and style wrangling is always fraught with issues so we probably ought to take it out of the 2.7.3 tag?

#16 @mercime
19 months ago

@hnla quick fix is fine for 2.7.3 so it's usable for "Clicking on the browse image" as was reported. a11y fix for 2.8.

#17 @hnla
19 months ago

@mercime yep - I'll commit quick fix in a day or two, I'll give it a quick check over see if it can be improved a little.

#18 @hnla
19 months ago

In 11265:

Improve avatar uploader button click area for MS Edge Browsers

In ME Edge the Moxie shim click event is out of alignment with the visual button element causing it to appear that one can't click to open file browser.

Commit adjusts the styles to provide a moxie-shim set of rulesets in avatar.css to force the position to better overlap the button element.

This is a temp/perm fix until such time as the uploader group of elements can be re-factored to allow greater positioning control.

See #7360
Props angeljs, mercime, hnla, DJPaul, slaFFik

#19 @hnla
19 months ago

  • Owner set to hnla
  • Resolution set to fixed
  • Status changed from new to closed

In 11266:

Improve avatar uploader button click area for MS Edge Browsers (Branch 2.7)

In ME Edge the Moxie shim click event is out of alignment with the visual button element causing it to appear that one can't click to open file browser.

Commit adjusts the styles to provide a moxie-shim set of rulesets in avatar.css to force the position to better overlap the button element.

This is a temp/perm fix backported to 2.7 until such time as the uploader group of elements can be re-factored to allow greater positioning control.

Fixes #7360 ( Branch 2.7 )

#20 @r-a-y
13 months ago

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.

Note: See TracTickets for help on using tickets.