Not a bug Content inside the CODE bbcode tags does not wrap on mobile

D

djbaxter

in memoriam 1947-2022
Affected version
2.1.7
I could have sworn I saw a similar thread somewhere but I can't find it. Feel free to merge it.

If a post contains the [ code] [ /code] tags, the content does not wrap so the reader needs to side scroll. Not a huge deal on widescreen desktop, but on mobile it's a right PITA.

This is also a problem in that Google Search console flags pages with such posts as "Not mobile friendly - content wider that screen".

There's also no horizontal scroll bar in a mobile browser although there is on a desktop.
 
Here's an example from an actual post on one of the forums I manage:

Code: 
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>360 Wireless Boise</title> <link rel="shortcut icon" href="[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-content/themes/yoo_balance_wp/favicon.ico"]/wp-content/themes/yoo_balance_wp/favicon.ico[/URL]" /> <link rel="apple-touch-icon-precomposed" href="[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-content/themes/yoo_balance_wp/apple_touch_icon.png"]/wp-content/themes/yoo_balance_wp/apple_touch_icon.png[/URL]" />               <script type="text/javascript">//<![CDATA[             // Google Analytics for WordPress by Yoast v4.3.3 | [URL="http://yoast.com/wordpress/google-analytics/"]Google Analytics for WordPress Plugin[/URL]             var _gaq = _gaq || [];             _gaq.push(['_setAccount', 'UA-11520475-9']);                             _gaq.push(['_setCustomVar',1,'post_type','page',3],['_setCustomVar',2,'year','2013',3],['_trackPageview']);             (function () {                 var ga = document.createElement('script');                 ga.type = 'text/javascript';                 ga.async = true;                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';                  var s = document.getElementsByTagName('script')[0];                 s.parentNode.insertBefore(ga, s);             })();             //]]></script>             <link rel='stylesheet' id='contact-form-7-css'  href='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.4"]http://360-wireless.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.4[/URL]' type='text/css' media='all' /> <link rel='stylesheet' id='jetpack-widgets-css'  href='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003"]http://360-wireless.com/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003[/URL]' type='text/css' media='all' /> <link rel='stylesheet' id='column-styles-css'  href='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-content/plugins/ultimate-tinymce/css/column-style.css?ver=3.5.1"]http://360-wireless.com/wp-content/plugins/ultimate-tinymce/css/column-style.css?ver=3.5.1[/URL]' type='text/css' media='all' /> <script type='text/javascript' src='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-includes/js/jquery/jquery.js?ver=1.8.3"]http://360-wireless.com/wp-includes/js/jquery/jquery.js?ver=1.8.3[/URL]'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/xmlrpc.php?rsd"]http://360-wireless.com/xmlrpc.php?rsd[/URL]" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/wp-includes/wlwmanifest.xml"]http://360-wireless.com/wp-includes/wlwmanifest.xml[/URL]" />  <link rel='next' title='Cell Phone Tips' href='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/cell-phone-tips"]http://360-wireless.com/cell-phone-tips[/URL]' /> <meta name="generator" content="WordPress 3.5.1" /> <link rel='shortlink' href='[URL="http://localsearchforum.catalystemarketing.com/view-source:http://wp.me/P3iteO-b"]http://wp.me/P3iteO-b[/URL]' />  <!-- All in One SEO Pack 1.6.15.3 by Michael Torbert of Semper Fi Web Designob_start_detected [-1,-1] --> <meta name="description" content="All your cell phone needs at the lowest prices buying, selling and repairing cell phones in Boise for over 13 years call us today (208) 384-0091" /> <link rel="canonical" href="[URL="http://localsearchforum.catalystemarketing.com/view-source:http://360-wireless.com/"]http://360-wireless.com/[/URL]" /> <!-- /all in one seo pack -->

On mobile, the bottom horizontal scroll bar is missing.
 
I'm not going to close this right now but I disagree in principle that code blocks should wrap, and I disagree with the assertion that "content is wider than screen".

This is usually reserved for when the entire screen is horizontally scrollable which usually suggests you've got content that is making the entire page scrollable.

In this particular case it isn't, it is only the code itself that is scrollable which has traditionally been acceptable.

If we forced some sort of wrapping here (which isn't the default behaviour for code blocks) then we end up with the post looking like this:

xenforo.com_community_threads_content-inside-the-code-bbcode-tags-does-not-wrap-on-mobile.175...webp

Which, in my opinion, is worse. There are no actual line breaks, hence why it displays on a single line by default, so the browser has to figure out where to wrap and it just seems undesirable.

But, aside from that which is more of a personal preference kind of thing, the crux of this issue is that Google is IMO falsely reporting this. I suspect it will pass.

Incidentally, I did two mobile friendly tests with horizontally scrolling code blocks and it only reported this in one case so I'm not sure if that's a sign Google's detection of this is slightly off in some cases.
 
Chris D said:
But, aside from that which is more of a personal preference kind of thing, the crux of this issue is that Google is IMO falsely reporting this. I suspect it will pass.
Click to expand...
I got this too a few weeks ago and it passed after a day or two. I guess it was falsely reporting.
 
Chris D said:
I'm not going to close this right now but I disagree in principle that code blocks should wrap, and I disagree with the assertion that "content is wider than screen".

This is usually reserved for when the entire screen is horizontally scrollable which usually suggests you've got content that is making the entire page scrollable.

In this particular case it isn't, it is only the code itself that is scrollable which has traditionally been acceptable.

If we forced some sort of wrapping here (which isn't the default behaviour for code blocks) then we end up with the post looking like this:

View attachment 217900

Which, in my opinion, is worse. There are no actual line breaks, hence why it displays on a single line by default, so the browser has to figure out where to wrap and it just seems undesirable.

But, aside from that which is more of a personal preference kind of thing, the crux of this issue is that Google is IMO falsely reporting this. I suspect it will pass.

Incidentally, I did two mobile friendly tests with horizontally scrolling code blocks and it only reported this in one case so I'm not sure if that's a sign Google's detection of this is slightly off in some cases.
Click to expand...

@Chris D

See above (my second post): https://xenforo.com/community/threa...s-does-not-wrap-on-mobile.175917/post-1401342

The problem really is that there is no horizontal scroll bar on mobile so there is no way to see the rest of the content on smaller mobile viewscreens. (At least not on iPhone or iPad which is all I have access to.) That part is not a Google problem, nor is it a false report. That part is a Xenforo bug.

You need to add the horizontal scrollbar on mobile.

That will fix the bug and if it doesn't satisfy Google I'm fine with that.
 
Chris D said:
That's a browser behaviour and not a XenForo behaviour.
Click to expand...
Apologies.

I was about to reply that if the issue affects all four major mobile browsers - Chrome, Firefox, Edge Chrome, and Safari - which it does - then surely that becomes an XF issue, no?

However, I first wanted to double check that this was true and it is. But in the process I discovered something else common to all those mobile browsers: if you left swipe the code segment, even just a nudge, the horizontal slide bar appears.

So you're correct: it is yet another Google false positive. On the other hand, from a user standpoint, it might be nice if the scroll bars appeared without requiring a partial left swipe. I don't know if there's a way to force that.
 
I left this open for a bit, but there isn't really anything we're going to change here.

Fairly sure the "content wider than screen" report is a false positive, and hopefully time has proved that to be true. I'll reiterate that I think wrapping the content is undesirable, so we won't go down that route. And, once again, the scrollbar behaviour is really down to the individual OS/browser.

I don't know if a similar behaviour in iOS but in macOS at least you can change the scroll bar behaviour:

1584037977744.webp
 
Back
Top Bottom