code-syntax-block icon indicating copy to clipboard operation
code-syntax-block copied to clipboard

Can't display well in iOS Safari

Open INXEKI opened this issue 5 years ago • 1 comments

In common PC web browser, the long code can be displayed with a slider. It's ok and every line correspond to their line number. But in iOS (iPhone, iPad, with the newest iOS version) Safari, it cant realize the same feature -- Code was wraps around to fit the screen, line don't correspond to their line number and at the bottom of all code, there are no line number :<

INXEKI avatar Sep 06 '20 10:09 INXEKI

The tag displaying the code is a standard HTML pre tag with white space set to pre. Here is the line in the prism.css https://github.com/mkaz/code-syntax-block/blob/trunk/assets/prism/prism.css#L17

The behavior you describe sounds like the white-space for the pre tag is set to white-space: pre-wrap either by your theme, other stylesheet, or Safari is rendering it improperly. For reference, the white-space spec from MDN.

You can check your theme or alternative stylesheet and confirm that white space property for the pre tag is unchanged.

If it's not the theme or other stylehseet, not much I can do about Safari. I would suggest a different browser but iOS devices don't allow a different rendering engine so even if you used Firefox or Chrome they still use Apple's junk.

mkaz avatar Sep 06 '20 14:09 mkaz