Fix: Theme preview in Mobile Chrome, Safari

[iNuanfeng]

Summary

I fix the sidebar style in mobile, when the body height is too small.

before	after

What kind of change does this PR introduce?

Bugfix

For any code change,

• Related documentation has been updated if needed
• Related tests have been updated or tests have been added

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

Related issue, if any:

Tested in the following browsers:

• Chrome
• Firefox
• Safari
• Edge
• IE

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/BFAzBQc3zneuuviEnrAiqqYu6EEV
✅ Preview: https://docsify-preview-git-fork-inuanfeng-develop-docsify-core.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3399977:

Sandbox	Source
docsify-template	Configuration

[sy-records]

Can you provide a reproducible environment or repo?

[Koooooo-7]

Concurred with @sy-records .

[trusktr]

@sy-records@Koooooo-7 the repo is linked at the top (https://github.com/iNuanfeng/docsify), and the vercel bot provided the live demo.

I tested it (deleted a bunch of elements in devtools inspector) but was not able to reproduce:

But I didn't try on an iPhone. Anyone else with an iPhone?

[sy-records]

It's normal for me to use iPhone to view.

[iNuanfeng]

@sy-records@Koooooo-7 the repo is linked at the top (https://github.com/iNuanfeng/docsify), and the vercel bot provided the live demo.

I tested it (deleted a bunch of elements in devtools inspector) but was not able to reproduce:

But I didn't try on an iPhone. Anyone else with an iPhone?

It will reappear on the iPhone.
My IOS version is 13.4.1
The chrome version on my iPhone is 87.0.4280.163

[iNuanfeng]

@sy-records When the content of the document is too small, it will be reproduced

[iNuanfeng]

你好，我的MR（#1683）中，指的是文档内容过少，没有撑满一屏长度的时候，左侧侧边栏会无法显示全。环境是iphone下的chrome

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2021年12月6日(星期一) 下午5:26 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [docsifyjs/docsify] Fix: Theme preview in Mobile Chrome, Safari (PR #1683) It's normal for me to use iPhone to view. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[sy-records]

I don't have that version of the device.

I am using IOS15 and Chrome 97 is working fine.

https://github.com/iNuanfeng/iNuanfeng.github.io

[trusktr]

@sy-records did you try with a small amount of content? Your screen shows a lot of content beyond the end of the bottom of the screen. See our screenshots that have little content.

[sy-records]

Yes, I tested it with his repo.

[trusktr]

@sy-records but in your screenshot (below), I see full content. Can you post a screenshot with small (not tall) content?

It's normal for me to use iPhone to view.

[sy-records]

[iNuanfeng]

@sy-records So, It may be a browser compatibility

[trusktr]

Hmm, yeah, just can't reproduce it yet.

But, if this fixes your issue, I think it is safe to merge because our snapshot tests are passing.

Wdyt @Koooooo-7@sy-records ?

[iNuanfeng]

@trusktr@sy-records@Koooooo-7 Thank you !

[trusktr]

@iNuanfeng no prob!

@Koooooo-7@sy-records we should add iPhone/Android tests. I learned how to configure playwright for that yesterday. WIP..