Long lines do not scroll in code block when using macOS Safari

  • Resolved George

    (@georgew751)


    5 years, 2 months ago

    I guess that I will be the first to post a support question …

    I have been looking a long time for the perfect plugin to post shell and code snippets on my website. The Syntax-highlighting Code Block is the best one that I have found so far. However, I am seeing a small issue.

    I added the filter to select the Xcode style for the server-side rendering engine. It works perfectly in Google Chrome, Firefox, and Microsoft Edge. When I have long lines that are longer than the code block width, the code block scrolls the line. That was the effect that I was hoping for.

    But for some reason, this does not work in macOS Safari. The long lines just wrap in the block window. Does anyone have any ideas about why this happens?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    It seems Safari is causing this style rule from your theme to inherit on the pre element:

    .site-content, .entry-header {
    word-wrap: break-word;
}

    In other words, it seems the word-wrap property in the site stylesheet is overriding the browser’s default styles for the pre element. Note that this name is legacy and it now should be overflow-wrap, apparently.

    You should be able to fix the problem by adding this CSS rule:

    .site-content pre { overflow-wrap:normal }

    • This reply was modified 5 years, 2 months ago by Weston Ruter.
    Thread Starter George

    (@georgew751)

    Yes, that fixed the issue!! Thanks so much. Now I know that I will be able to convert the rest of my posts to use code blocks. I have been holding off writing new posts until I was sure that I had a good method of adding shell/code snippets to them.

    Thread Starter George

    (@georgew751)

    I played around with this some more. I notice that every time I start up Safari and go to my blog post that has long lines, the long lines are wrapping again.

    Then I notice that I could hit the Safari refresh button and then the line scrolling starts working again. It continues to work as long as the Safari session is active.

    I used the WP “Appearance/Customize/Additional CSS” to add the CSS line. May be there is an interaction with my caching plugin, WP Rocket. I did make sure that I cleared the cache after adding the CSS line. I’ll play around with it some more to see what I can learn, but I wanted to give some additional feedback.

    Thanks.

    Thread Starter George

    (@georgew751)

    I have not been able to resolve this issue–lines wrapping after starting up a fresh Safari session and then going to my blog post–starts working when I click on the refresh button.

    I went back to the “plain” code block after deactivating the plugin and removing the CSS rule listed above. I see no issues with long lines scrolling in the basic code block in Safari. Did the plugin break something? Just trying to provide some feedback on my experience.

    Plugin Author Weston Ruter

    (@westonruter)

    The plugin just adds stylesheets as provided by https://github.com/scrivo/highlight.php which in turn is providing them from https://highlightjs.org/

    So if there is a bug, then those are where you should report it. In particular: https://github.com/highlightjs/highlight.js/issues

    Thread Starter George

    (@georgew751)

    Got it! Thanks very much. I am still on a learning curve, and I have been jumping in with both feet. Thanks for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Long lines do not scroll in code block when using macOS Safari’ is closed to new replies.

Tags