(Edge browser) Using sphinx-copybutton introduces windowing of code

[rsokl]

Hello! I have been planning to use your extension when building Python Like You Mean It, however I found that, in the Microsoft Edge browser, it collapses the code blocks into scrollable windows.

For example:

whereas on Chrome everything appears as I would expect:

This is especially disruptive for single-line code snippets as the code becomes obscured by the scroll bar.

I am using sphinx 3.0.1 and nbsphinx 0.6. Let me know if there is any other useful information that I can provide.

I am eager to start using your extension 😄

[choldgraf]

Hmmm - it looks like this is only a problem with the sphinx-rtd-theme and microsoft edge. I am not as familiar with using edge / how to develop on it etc, but I bet that the issue would be in the CSS overlap rules for the code cells. PRs are definitely welcome if somebody figures out a CSS incantation that makes it work

Maybe @mgeier has run into this issue before with nbsphinx's use of copybutton?

[mgeier]

@choldgraf I haven't heard anything from Edge users, neither good nor bad.

There has been an overflow problem with Chromium, though:

https://github.com/spatialaudio/nbsphinx/pull/349/files#diff-4b6afd0fa4c9aae80ae389f523f5a1a5R590-R594

This may be related? It was only w.r.t. vertical scrollbars, though. TBH, I don't quite understand why this is happening ...

[choldgraf]

TBH, I don't quite understand why this is happening ...

this describes the last 4 years of my life with CSS :-)

I think that PR you linked might be related as well - @rsokl wanna see if CSS like these fixes your Edge problem? If so we can see if it's possible to fix with sphinx-copybutton, but it may need a theme-related fix

[rsokl]

Just a heads-up: it looks like the new Chromium-based version of Edge does not have this issue. So this will eventually go away on its own as the old version of Edge goes by the wayside.

[choldgraf]

hooray for magical black-box under the hood bugfixes :-)

[mgeier]

I don't know whether this has anything to do with anything, but this was recently suggested for nbsphinx: https://github.com/spatialaudio/nbsphinx/pull/454.

Probably this issue also has something to do with rounding of em/rem values?

It's probably desperate, but it might be worth a try. @rsokl Could you try replacing the em/rem values in https://github.com/executablebooks/sphinx-copybutton/blob/master/sphinx_copybutton/_static/copybutton.css with px values to see whether it changes anything?

[rsokl]

@mgeier so sorry for the delay. Unfortunately, both of my windows machines got updates that pushed the new chromium-based Edge browser, so I can't easily check that fix.

[choldgraf]

Hmmm - not to be dismissive of this problem, but your comment makes me wonder if this is an issue that will increasingly reduce in its effect on others as windows machines continue updating to the new edge browser. Anybody know the timeline for that rollout?

[rsokl]

Based on this article https://www.zdnet.com/google-amp/article/microsoft-kicks-off-staged-rollout-of-chromium-based-edge-what-to-expect/ it sounds like automatic upgrades are happening for non enterprise customers now and enterprises maybe late this year although they could block it if they want.

[choldgraf]

So then this bug will surface for someone at the intersection of:

1. Using windows
2. Using the edge browser
3. Hasn't yet been upgraded (in which case, give it a few months)
4. or is unable to upgrade

?

[rsokl]

So.. my brother kindly looked into this with me. I don't really have any experience with web design stuff.

It doesn't appear that proposed the pixel value fix affects the appearance, however it does appear that the following modifications fixes the behavior in the old version of Edge. (Just for fun, we checked IE11, and the copy button just doesn't work at all in it)

div.nbinput.container div.input_area > div[class^='highlight'], 
div.nboutput.container div.output_area > div[class^='highlight'] {
    overflow-y: hidden;
    overflow-x: hidden;  /*add this*/
}

.rst-content pre.literal-block, .rst-content div[class^='highlight'] {
    border: 1px solid #e1e4e5;
    /*overflow-x: auto; */ /*remove this*/ 
    margin: 1px 0 24px 0;
}

[rsokl]

Just wanted to bump this - this is potentially a solution to the original issue

[choldgraf]

Hey - taking a look at this, I'm not sure we want to add an overflow-x: hidden to the input/output areas or I'm worried that they would no longer be scrollable. Though maybe that would be fixed by the ^= black after, I'm not sure. Want to make a PR that adds this CSS and we can take a look at the docs demo?