docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Problem with code block in dev mode and ios

Open trofim24 opened this issue 8 months ago • 4 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [x] I'm using the latest version of Docusaurus.
  • [x] I have tried the npm run clear or yarn clear command.
  • [x] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • [x] I have tried creating a repro with https://new.docusaurus.io.
  • [x] I have read the console error message carefully (if applicable).

Description

Problem on ios mobile phone Safari/Chrome browser with size of code block after build with --dev option

Reproducible demo

https://trofim24.github.io/

Steps to reproduce

  1. Create a new Docusaurus site with npx create-docusaurus@latest my-website classic -t command from instruction
  2. Go to created folder cd my-website
  3. Run build with --dev option use npm run build -- --dev command from instruction
  4. Open site on mobile phone and check block of code for example /docs/tutorial-basics/markdown-features/#mdx-and-react-components

Expected behavior

Font size of code is normal

Image

Actual behavior

Forn size of code is big

Image

Your environment

  • Public source code: https://github.com/trofim24/my-website
  • Public source code of build: https://github.com/trofim24/trofim24.github.io
  • Public site URL: https://trofim24.github.io/
  • Docusaurus version used: 3.7.0
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): iOS v17.2 Browser Safari appVersion: "5.0 (iPhone; CPU iPhone OS 17_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1"
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): OS iPhone 15 Pro Max iOS, v17.2

Self-service

  • [ ] I'd be willing to fix this bug myself.

trofim24 avatar Mar 06 '25 20:03 trofim24

Can you please explain if this is related to --dev and iOS?

Do you see the same behavior without --dev?

Do you see the same behavior if you use another iOS device or Android?

How did you obtain the 2 screenshots exactly? What differentiates them?

What is your iOS device, browser/safari version etc?

slorber avatar Mar 07 '25 13:03 slorber

Without --dev option problem doesn't repeat. Problem doesn't repeat on Android and on browser emulate device mode. Problem repeats on iPhone 15 Pro Max and iPhone 14 with Browser Safari appVersion: "5.0 (iPhone; CPU iPhone OS 17_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1"

First screenshot is on version without --dev option. Second is on version with --dev option

trofim24 avatar Mar 08 '25 10:03 trofim24

I don't have an ios physical device, does the problem repeat in ios simulators? It looks like you took screenshots of simulators.

slorber avatar Mar 08 '25 13:03 slorber

Yes, I check it on browserstack for example

trofim24 avatar Mar 10 '25 16:03 trofim24