docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.7k stars 5.68k forks source link

The display looks broken on our docsify site #1240

Open alexellis opened 4 years ago

alexellis commented 4 years ago

Bug Report

Hi, the display looks broken on our docsify site and I'm not really sure what happened.

Steps to reproduce

The source is here, and deployed via GitHub pages:

https://github.com/inlets/docs

What is current behaviour

Screenshot 2020-06-22 at 11 01 37

The logo is out of scale and the buttons are not in the correct position.

What is the expected behaviour

Previously the front page loaded with the logo followed by the buttons. No changes have been made.

Other relevant information

I've tried with Safari and Chrome

Please create a reproducible sandbox

Edit 307qqv236

Can be deployed from the GitHub repo linked.

Mention the docsify version in which this bug was not present (if any)

HEAD / master (I would assume):

  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
anikethsaha commented 4 years ago

Thanks for the report, can you check with version 4.11.3 ?

jhildenbiddle commented 4 years ago

Hey @alexellis --

This is a docsify issue, although it is one that only appears when 1) coverpage content scales with the browser viewport and 2) when the browser window is sized disproportionately wide or tall. In your case, you have a large logo image that is set to width: 50% and a browser sized considerably wider than it is tall.

Two paths forward:

  1. Apply a max-width value to your logo image. This will prevent your logo image from scaling beyond a fixed amount. Note that this cannot be done with markdown, so you will need to replace your marking image syntax:

    ![logo](images/inlets-logo.svg ':size=50%')

    With a standard HTML <img> tag with the style attribute:

    <img src="images/inlets-logo.svg" style="width: 50%; max-width: 300px;">

    Or add a <style> block to your index.html and create a CSS rule that targets the logo image:

    <style>
     .cover img[src$="inlets-logo.svg"] {
       max-width: 300px;
     }
    </style>
  2. Wait for this bug to be fixed in the next release of docsify.

Note that the bug fix won't address your mega-image-scaling issue, but it will allow the coverpage to grow and contain its content the needed. Point being, you probably want to do both items listed above.