search

knighty / fimfiction-issues

Fimfiction Issue Tracker
27 stars 1 forks source link

Page-width-dependent display bug: "Patreon Sponsor" tags overlapping user stats box #247

Open baxil opened 6 years ago

baxil commented 6 years ago

EDIT: See NumeronEight's comment below.

Description: In Chrome, author page headers on blog posts, stories, story lists, etc., have a "Member Since:"/"Last Seen:" box in the top right. If the author is also a Patreon sponsor, there is a separate "Patreon Sponsor" display element which overlays that box, obscuring the author info text.

Platform: Google Chrome 62.0.3202.94 on Windows 7 desktop.
Note: I was not able to reproduce the overlap in Firefox on Win7, or in Chrome on Win8. This is because on those platforms, the MS/LS author info is not displayed. See attached screenshots.

Reproducibility: Using the Google Chrome browser on Windows 7, visit any page with a header for an author who is a site Patreon sponsor; e.g. https://www.fimfiction.net/user/866/Cold+in+Gardez/stories. The display overlap occurred for me both logged in and logged out, and with adblockers both active and disabled.

(No overlap) Firefox/Win7: 20171201-fimfic-patreon-overlay-bug-firefox (Overlap) Chrome/Win7: 20171201-fimfic-patreon-overlay-bug-chrome

NumeronEight commented 6 years ago

So, this bug interested me, and I've done a couple small tests.

Description

In Chrome 62.0.3202.94 running on an Ubuntu 17.04 notebook, I've found that this bug appears with page width <= 1400px (image 1). One px above and the "last seen" box moves to the row of tabs (image 2), but there it’s slightly covered by the "Stories" tab. A behavior that I would consider ordinary appears from width 1475px and above, in which everything is clearly visible (image 3).

In Firefox on the same machine and in Edge on a Windows 10 notebook I've observed a similar behavior related to page width, with a slight difference: when the "last seen" box goes inline with the tabs it is immediately readable in its entirety. In other words, what is shown in image 2 does not happen and there's a direct transition from image 1 to image 3.

Platforms

Platform OS Device Affected
Chrome 62.0.3202.94 Ubuntu 17.04 Notebook Yes(1,2,3)
Firefox 57.0.1 Ubuntu 17.04 Notebook Yes(1,3)
Edge 41.16299.15.0 Windows 10 Notebook Yes(1,3)

Attachments

1400-visible-overlap-cut

Image 1 - Patreon bar overlapping with "Last seen" box. Page width is 1400px. Chrome.

1401-underlap-cut

Image 2 - "Last seen" box partially covered by "Stories" tab. Page width is 1401px. Chrome.

1475-regular-cut

Image 3 - Ordinary behavior. Page width is 1475px. Chrome.

Edit: typos

baxil commented 6 years ago

@NumeronEight Ooh, great catch. Thank you! I've updated the bug report accordingly.

My Windows 8 tests were on an Asus EEEbook with 1366x768 maximum display resolution so that's likely to have affected my results. My Win7 tests were on a desktop with ample display space, and I can confirm that horizontally resizing the window was able to toggle the bug state as described.