Skip to:
Content

BuddyPress.org

Opened 2 years ago

Closed 2 years ago

#7928 closed defect (bug) (fixed)

Wrong offset for @mentions container for devices <= 400px

Reported by: BackpackersUnion Owned by: boonebgorges
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.0.0
Component: Activity Keywords: has-patch
Cc:

Description

When using @Username (i.e. Mentions) on a mobile device (or emulator), it appears a recent BP update (BP 2.9 -> 3.1) added some CSS/JS code that moved the mentions list off screen and out of view of the user.

To reproduce, use a mobile device or mobile emulator and try @mentioning a friend in the "What's New" text box or in a Comment. You should see the opaque background of the Mentions area (.atwho-view) but no friends or users listed.

The problem seems to be caused by CSS/JS that is effecting .atwho-view. Before the update the selector was getting the style "top: 107px;" applied, after the update the same style is "top: -5026px;".

WordPress 4.9.7
BuddyPress: Problem happening on 3.1.0 (did not occur with v2.9)
Theme: 2014

Attachments (1)

7928.01.patch (611 bytes) - added by r-a-y 2 years ago.

Download all attachments as: .zip

Change History (7)

#1 @r-a-y
2 years ago

  • Component changed from Core to Activity
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.2.0
  • Version set to 3.0.0

Confirmed when emulating iPhone 6/7/8 in Chrome, basically any width <= 400px.

I have a tentative fix that removes the height:100% CSS rule, which fixes things somewhat.

@BackpackersUnion - Can you test?


The following might also be a better fix for small-width screens:
https://github.com/ichord/At.js/issues/321#issuecomment-319516017

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

@r-a-y
2 years ago

#2 @r-a-y
2 years ago

  • Summary changed from Bug - Mentions (Updating from BP 2.9 -> 3.1) to Wrong offset for @mentions container for devices <= 400px

#3 @DJPaul
2 years ago

  • Milestone changed from 3.2.0 to 4.0

Moving to 4.0.0 because we could do with more testing of this patch and deciding if updating at.js is more appropriate.

#4 @boonebgorges
2 years ago

I'm going to go with the smaller CSS fix for now. We should address updating at.js for the next release, as there may be compatibility breaks.

#6 @boonebgorges
2 years ago

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

In 12289:

Fix positioning of @-mentions interface on mobile devices.

Props r-a-y.
Fixes #7928.

Note: See TracTickets for help on using tickets.