-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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
Chrome breaks layout if system language is Chinese #911
Comments
I'm gonna need a little more than this. What resolution does this happen, for example? Please, please, please stick to the issue template when reporting new issues and provide everything that is necessary to reproduce the issue. |
I mean, in the chrome, some size display correct, some size have problem. Now, I take 3 screenshots in another windows computer,the chrome version is 70.0.3538.67. Now, let me visit https://squidfunk.github.io/mkdocs-material/getting-started/ screenshot 1:the same as mobilephone,it is correctscreenshot 2:the size is bigger than screenshot 1,it is correctscreenshot 3:the size is bigger than screenshot 2,it has problem:I can't see the Right sidebar fullySo, Mkdocs-material does not fit perfectly into multiple sizes in chrome browser. |
I'm afraid I cannot reproduce this. Is this the latest Chrome version? Somebody experiencing the same problem? |
eh, eh, actually, the problem appear at least 1.5 years(at that time, I just learn mkdocs-material)... You can try turn up the brower size slowly |
As said before, I'm not able to reproduce it on Chrome macOS. It's very strange that this is happening for you. Maybe somebody else has experienced the same, we need a way to reproduce it. |
I reinstall the latest chrome, but the problem still exists, these days I will try a few more times in more other peoples. |
Thanks for investigating! However, when I change my system language to Chinese I'm unable to use my computer 😐 |
Can maybe somebody else using Chinese as a system language reproduce (or even debug) it? |
Following are the comparisons in different browsers and screen sizes: 13" model (Chrome)15" model (Chrome, full screen)15" model (Safari) |
Well, this has to be induced by some deeper cause than OS language or Notebook model. We need to find the cause and fix it. Assistance would be great from the people who can reproduce this error, because up to now I can't. A great start would be looking at the DOM, the specs/properties of the elements and see if there's something applied that makes it break. |
Closing, as its still not reproducible. If somebody manages to debug (and maybe fix it) you are most welcome to submit a PR. |
@smancill - did you use browser zoom? What's your base font size? |
Still, I cannot reproduce it on Chrome macOS. What the... |
Ok, The problem is that But I do have all the font sizes in Chrome set to the default recommended medium size (16px). Also, the size in pixels for all text elements is actually the same in both Chrome and Firefox: |
Awesome, thanks! Setting the minimum font size to |
I actually found another issue with Chrome if reducing the minimum font size still doesn't work. There is a hidden setting in Chrome that I cannot change from the preferences panel UI:
I had both I had to quit Chrome, edit the preferences file manually to set |
@walkccc you have to set the font size within Chrome settings, not DevTools. However @smancill research led to an unresolved issue I found which may explain why the issue for some users only appears for Chinese:
|
Thanks, I will see if we can fix it somehow. |
Only Chinese should be affected, as Material sets the root font size to 10 for an efficient usage of
|
So, the problem is definitely triggered by the fact that the minimal font size for Chinese cannot be smaller than This year-standing "fix" in Chrome greatly hinders accessibility. Material puts a huge effort in being as accessible as possible by defining every dimension in We could try to provide a "good enough" experience by somehow working around this issue in the CSS or base all computations on a base font size of I really do not want to lock out the whole Chinese community and I'm really shocked that such a fundamental issue remains unsolved for such a long time, impacting a huge part of the world's population. Refactoring all |
I encountered the same problem today. And thank you for your efforts on fixing this bug! |
I tried to write something up in a few tweets about this problem and would kindly ask everybody to retweet it, so we maybe get some attention by the Chrome dev team: https://twitter.com/squidfunk/status/1095246562664607744 |
Looks like I have good news – I just pushed a potential workaround in 2007484 and 946f4f1 to
My testing shows that the issue is indeed fixed. The site looks exactly the same when I set the minimal font size to The change is already deployed to the live site, so everyone experiencing the problem please visit https://squidfunk.github.io/mkdocs-material/ to check if the problem is gone Before: After: If we come to the conclusion that the issue is fixed, the next steps are:
What. A. Journey. I think we're all much wiser now and it seems that we're actually the first discovering the problem of minimal font size in respect to |
@masterstevelu @walkccc @cyent @smancill – could someone of you please verify, whether the issue is now gone when visiting the official Material docs? |
The bug is fixed on my Chrome. Thannk you! |
@squidfunk Hi Martin, when can I use your newest build if I install it using pip? |
It's gone! |
Awesome! As described above, I would like someone to review 2007484 before I will issue a new major release. We need to make sure that all
If we missed something, it will break some projects down the line. Better safe than sorry. I will prepare the release notes and upgrade instructions, so we can issue a new release as soon as we're sure we won't break anything. |
I don't see any mistakes in 2007484 |
Released as part of 4.0.0! I want to thank you all for your effort on helping fix this issue. Material should now finally look as it it should in China :-) |
Description
Only chrome meet the bug,safari and firefox are correct.
the case include my "mkdocs serve" and your "https://squidfunk.github.io/mkdocs-material/"
this is chrome:
this is firefox:
Package versions
2.7.10
1.0.4
3.0.6
Project configuration
System information
The text was updated successfully, but these errors were encountered: