Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

www.inoreader.com - Up/Down arrows are displayed misaligned #51473

Closed
jsnjack opened this issue Apr 11, 2020 · 6 comments
Closed

www.inoreader.com - Up/Down arrows are displayed misaligned #51473

jsnjack opened this issue Apr 11, 2020 · 6 comments
Labels
browser-fenix engine-gecko The browser uses the Gecko rendering engine priority-normal severity-important A non-core broken piece of functionality, not behaving the way you would expect. type-css-scrolling-issues Issues where certain CSS prevents scrolling a page properly
Milestone
duplicate

Comments

@jsnjack
Copy link

jsnjack commented Apr 11, 2020

URL: https://www.inoreader.com/folder/Tech

Browser / Version: Firefox Mobile 75.0
Operating System: Android
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
hi! the website is a news feed. you will need to log in in it in order to reproduce the issue. page layout on the feed page is corrupted: it is possible to pan out of the viewport and scrolling is applied to the incorrect element on the page

View the screenshotScreenshot
Browser Configuration
  • None

From webcompat.com with ❤️
@webcompat-bot webcompat-bot added this to the needstriage milestone Apr 11, 2020
@webcompat-bot webcompat-bot added browser-fenix engine-gecko The browser uses the Gecko rendering engine priority-normal labels Apr 11, 2020
@softvision-oana-arbuzov softvision-oana-arbuzov added the severity-important A non-core broken piece of functionality, not behaving the way you would expect. label Apr 13, 2020
@softvision-oana-arbuzov softvision-oana-arbuzov changed the title www.inoreader.com - design is broken www.inoreader.com - Up/Down arrows are displayed misaligned Apr 13, 2020
@softvision-oana-arbuzov
Copy link
Member

Thanks for the report. I think I was able to reproduce the issue. The arrows appear to be displayed after scrolling down the page.
image
Is this the issue you are experiencing too @jsnjack ?

Tested with:
Browser / Version: Firefox Preview Nightly 200408 (🦎 77.0a1-20200407093520)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)

Moving to Needsdiagnosis for further investigation.

@jsnjack
Copy link
Author

jsnjack commented Apr 13, 2020

Hi @softvision-oana-arbuzov! Thanks for looking into it. Yes this is the issue.

@cipriansv cipriansv modified the milestones: needsdiagnosis, fixed Oct 14, 2020
@cipriansv
Copy link

After retesting the issue I confirm that I receive the same layout in Firefox and Chrome.

Tested with:
Browser / Version: Firefox Nightly 201013(🦎 82.0a1-20201012093605), Chrome Mobile 85.0.4143.127
Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

This is the web page displayed in Firefox Nightly:

image

And this is the web page displayed in Chrome:

image

I think it is safe to close this as fixed.

@jsnjack
Copy link
Author

jsnjack commented Oct 14, 2020

@cipriansv
I have installed the latest Firefox nightly and the issue still exists:
Screenshot_20201014-144358

@cipriansv cipriansv modified the milestones: fixed, needsdiagnosis Oct 14, 2020
@cipriansv
Copy link

Thanks, @jsnjack.

It is broken indeed.

image

Reopening the issue.

@cipriansv cipriansv reopened this Oct 14, 2020
@wisniewskit
Copy link
Member

This can also be seen in the responsive design mode.

The problem is that they have a div#jumper_div element which is hidden off-screen with position:absolute; top:-1000px.

But it also has left:40%; width:354px, which makes it wider than the viewport, causing Firefox to add a scrolbar to the <html> element (presumably so the user can scroll to see the element).

Which is odd, because it's off the top of the viewport, so there is no way to scroll to it anyhow.
Chrome does not bother with the vertical scrollbar and "phantom space" under the content in this case, so the layout works.

I've made a reduced test-case on bz1680823 so we can figure out what to do here.

@wisniewskit wisniewskit self-assigned this Dec 4, 2020
@wisniewskit wisniewskit modified the milestones: needsdiagnosis, duplicate Dec 4, 2020
@wisniewskit wisniewskit added the type-css-scrolling-issues Issues where certain CSS prevents scrolling a page properly label Dec 4, 2020
@dholbert dholbert mentioned this issue Feb 10, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-fenix engine-gecko The browser uses the Gecko rendering engine priority-normal severity-important A non-core broken piece of functionality, not behaving the way you would expect. type-css-scrolling-issues Issues where certain CSS prevents scrolling a page properly
Projects
None yet
Milestone
duplicate
Development

No branches or pull requests
5 participants
@wisniewskit @jsnjack @webcompat-bot @softvision-oana-arbuzov @cipriansv