Skip to content

/ pythondotorg

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.

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

Menu bar is not displayed with Firefox on Windows #1371

Open
atsuoishimoto opened this issue Dec 29, 2018 · 15 comments
Open

Menu bar is not displayed with Firefox on Windows #1371

atsuoishimoto opened this issue Dec 29, 2018 · 15 comments
Labels
bug frontend

Comments

@atsuoishimoto
Copy link

@atsuoishimoto atsuoishimoto commented Dec 29, 2018

Describe the bug

Menu of the top page(https://www.python.org) is not displayed with FireFox(64.0) on Windows.
Firefox on macOS looks good.

with Firefox:

firefox

with Chrome:

with chrome

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://www.python.org' with recent Firefox on Windows.

Desktop (please complete the following information):

  • Windows 10
  • Firefox 64.0
@berkerpeksag berkerpeksag mentioned this issue Apr 9, 2019
Open
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 9, 2019

Yes, python.org renders fine with Firefox 66.0.2 (64-bit) on macOS. I don't have a Windows to test it at the moment.
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 10, 2019

I can repro this - @berkerpeksag what can I get or try for you to help out? (I'm 100% not a web dev)
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 10, 2019

If I disable the left: -260px property it looks like this:

image
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 10, 2019

Your screenshot is already helping me to understand what's wrong :) I think there's something wrong with our operating system/browser/device screen size detecting code because that navigation is for smaller screens.

Could you also check the value of <html class=""> attribute? For me, it's set to:

<html class="js no-touch geolocation fontface generatedcontent svg formvalidation placeholder boxsizing retina flexslide" lang="en" dir="ltr" style="">

Also, I know you're not a lawyer, but is it OK to use my MSDN subscription for Python core devs to set up a Windows environment for python.org development?
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 10, 2019

Mine is:

js touch geolocation fontface generatedcontent svg formvalidation placeholder boxsizing retina flexslide

If I change touch to no-touch then it renders fine. Edge already has no-touch there, and changing it to touch breaks it in the same way.

And yeah, go right ahead using the MSDN subscription for that. It'd only get problematic if you were using it for commercial purposes.
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 10, 2019

Thanks! Our feature detection code is broken. I will fix it tomorrow.
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 10, 2019

Can you type Modernizr.touch; to the devtools' console? If it returns true then Modernizr is outdated.
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 11, 2019

Indeed:
image
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 11, 2019

Thanks! This should normally return false:

'ontouchstart' in window || window.navigator.msPointerEnabled || 'ontouchstart' in document.documentElement
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 11, 2019

Both ontouchstart conditions are true (though the values are null, but I think that's expected?)

It's odd that Edge doesn't have this on my machine, which definitely has a touch screen. Maybe there's an "opt-in to latest Edge APIs" header/meta tag missing?
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 11, 2019

This looks like a great mess and apparently Modernizr is planning to remove this feature checking feature in the future. I will have to do more research on this.
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 11, 2019

I guess this is the most reliable way to detect touch devices.

"matchMedia" in window && window.matchMedia("(any-pointer: coarse)").matches

Unfortunately, it won't work with older browsers. I'll check python.org browser statistics.
@zooba

This comment has been minimized.

Sign in to view
Copy link
Member

@zooba zooba commented Apr 11, 2019

It returns true for both Firefox and Edge for me. Is that expected?

Presumably the idea is to use a different layout with no hover effects on a touch-only device, yes? Maybe there's a different idea here about handling touch-clicks different from mouse-clicks/hovers?
@berkerpeksag

This comment has been minimized.

Sign in to view
Copy link
Member

@berkerpeksag berkerpeksag commented Apr 11, 2019

Presumably the idea is to use a different layout with no hover effects on a touch-only device, yes?

Correct and the problem is most of the layout code is relying on .touch and .no-touch classes. I will try to rewrite at least main navigation code to rely on media queries.
@rakesh4real

This comment has been minimized.

Sign in to view
Copy link

@rakesh4real rakesh4real commented Aug 22, 2019

Shouldn't this issue be closed as the "menu" itself is removed from website??
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug frontend
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@atsuoishimoto @berkerpeksag @zooba @rakesh4real
You can’t perform that action at this time.