White scroll bars appear in dark mode in Blink on macOS

[danielledeleo]

Edge on macOS (system dark mode, Show scroll bars set to: Automatic based on mouse or trackpad):

In Firefox, the issue is less apparent, but still present.

Light mode screenshots (scroll bars also visible):

Chrome/Edge:

Firefox:

On mobile (iOS, Safari), where title overflow is most relevant, the current CSS overflow-x: scroll; rule works elegantly. Scroll bars only appear when in use.

[danielledeleo]

The simplest visual fix for desktop would be:

 h2 {
     font-size: 2rem;
     line-height: 2.25rem;
     margin: 1rem 0 .5rem 0;
     overflow-x: scroll;
+    scrollbar-width: none;
 }

[lcrilly]

Hi @danielledeleo - thanks for the report. I want to see if we can solve this with the overflow behavior before resorting to hiding the scrollbar.

Is that something you can take a look at?

[danielledeleo]

Hi @danielledeleo - thanks for the report. I want to see if we can solve this with the overflow behavior before resorting to hiding the scrollbar.

Is that something you can take a look at?

That was my first impulse as well. Note that even today, the horizontal scrollbars aren't displayed at all in Safari on iOS until you touch the scroll area, and the proposed CSS fix doesn't change that behaviour. I don't have an Android device to test on unfortunately.

The worst case comes from long titles that don't break on spaces, like ngx_http_proxy_protocol_vendor_module. Breaking on underscores would be better, but that requires modifying titles:

 <h2>Module ngx<wbr/>_http<wbr/>_proxy<wbr/>_protocol<wbr/>_vendor<wbr/>_module</h2>

---

I think this is a great solution. Here's what it looks like with <wbr/> tags injected in the browser inspector:

---

Manual <wbr> is preferable to word-break: break-all; to avoid situations like this:

---

Conclusion

I tried to get it working by injecting them at the XSLT level (it has been about 10 years since I last wrote XSLT), but the bespoke XSLS pre-processor seems to be extremely picky and lacking in features. If someone more familiar with this XSLS dialect wants to give it a shot, go for it. I can't commit to a fix at this time.

[lcrilly]

Nice idea.

In theory we could do something like this in body.xsls

!{replace(@name, '_', '<wbr/>_')}

but it seems our XSLT processor doesn't support replace(). I also tried it directly in body.xslt

…
tools/xslscript.pl -o  xslt/body.xslt  xsls/body.xsls
xmllint --noout --valid  xml/index.xml
xsltproc -o  libxslt/index.html    xslt/news.xslt  xml/index.xml
xmlXPathCompOpEval: function replace not found

[lcrilly]

We do get translate() though… but it only transforms a single character so we can't insert a tag.

Here's a horrible hack:

diff --git a/xsls/body.xsls b/xsls/body.xsls
index d6010842..212fa57b 100644
--- a/xsls/body.xsls
+++ b/xsls/body.xsls
@@ -43,7 +43,8 @@ X:template body (lang) {
 
     <div id="content">
         <h2>
-        !{@name} X:if "$YEAR" { X:text{: } !{$YEAR} }
+        !{translate(@name, '_', '﹏')}
+        X:if "$YEAR" { X:text{: } !{$YEAR} }
         </h2>
 
         X:if "$ORIGIN and document(concat($XML, '/', $ORIGIN))/*/@rev and
diff --git a/css/style_en.css b/css/style_en.css
index 663923b7..85fa664d 100644
--- a/css/style_en.css
+++ b/css/style_en.css
@@ -66,7 +66,6 @@ h2 {
     font-size: 2rem;
     line-height: 2.25rem;
     margin: 1rem 0 .5rem 0;
-    overflow-x: scroll;
 }

 h4 {

Edit: Unicode Character “＿” (U+FF3F) is a more elegant solution but I'll leave the wavy line for illustrative purposes.