<p dir="auto"><strong>Note:</strong> I've solved this with a monkey-patch, but wanted to share anyway.</p>
<p dir="auto">matplotlib 3.3.0, python 3.7.8 and jupyter 1.0.0</p>
<p dir="auto">Plots wouldn't render properly as the HTML-canvas .mpl-canvas would have "undefinedpx" height and width. The culpitt is in the two lines I'll mention soon.</p>
<div class="highlight highlight-source-python notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="%matplotlib notebook

from matplotlib import pyplot

pyplot.figure(figsize=(4, 4))
pyplot.plot([1, 2, 3, 2])"><pre class="notranslate"><span class="pl-c1">%</span><span class="pl-s1">matplotlib</span> <span class="pl-s1">notebook</span>

<span class="pl-k">from</span> <span class="pl-s1">matplotlib</span> <span class="pl-k">import</span> <span class="pl-s1">pyplot</span>

<span class="pl-s1">pyplot</span>.<span class="pl-en">figure</span>(<span class="pl-s1">figsize</span><span class="pl-c1">=</span>(<span class="pl-c1">4</span>, <span class="pl-c1">4</span>))
<span class="pl-s1">pyplot</span>.<span class="pl-en">plot</span>([<span class="pl-c1">1</span>, <span class="pl-c1">2</span>, <span class="pl-c1">3</span>, <span class="pl-c1">2</span>])</pre></div>
<p dir="auto">I've used console.log(...) to debug and noticed <code class="notranslate">entry.contentBoxSize</code> in the code below would be a list of one item, instead that idem directly. Hence I monkey-patched a <code class="notranslate">[0]</code> in two lines in <code class="notranslate">.virtualenvs/my-environment/lib/python3.7/site-packages/matplotlib/backends/web_backend/js/mpl.js</code> as a fix.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="                width = entry.contentBoxSize[0].inlineSize;
                height = entry.contentBoxSize[0].blockSize;"><pre class="notranslate">                <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentBoxSize</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">inlineSize</span><span class="pl-kos">;</span>
                <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentBoxSize</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">blockSize</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I'm clueless what exactly I've done and whether it makes sense, but it solved the problem.</p>
<p dir="auto">I've also noticed that there's nothing similar to the code mentioned in the current <a href="https://github.com/matplotlib/matplotlib/blob/master/lib/matplotlib/backends/web_backend/js/mpl.js">head of github</a>, so probably this will resolve itself within the next update.</p>
<p dir="auto">I just wanted to share, in case some else runs into this issue or future-me.</p>
<p dir="auto">This is the relevant code-snippet of <code class="notranslate">matplotlib/backends/web_backend/js/mpl.js</code> that I needed to change.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    var resizeObserver = new ResizeObserver(function (entries) {
        var nentries = entries.length;
        for (var i = 0; i &lt; nentries; i++) {
            var entry = entries[i];
            var width, height;
            if (entry.contentBoxSize) {
                width = entry.contentBoxSize.inlineSize;
                height = entry.contentBoxSize.blockSize;
            } else {
                width = entry.contentRect.width;
                height = entry.contentRect.height;
            }

            // Keep the size of the canvas and rubber band canvas in sync with
            // the canvas container.
            canvas.setAttribute('width', width * mpl.ratio);
            canvas.setAttribute('height', height * mpl.ratio);
            canvas.setAttribute(
                'style',
                'width: ' + width + 'px; height: ' + height + 'px;'
            );

            rubberband_canvas.setAttribute('width', width);
            rubberband_canvas.setAttribute('height', height);

            // And update the size in Python. We ignore the initial 0/0 size
            // that occurs as the element is placed into the DOM, which should
            // otherwise not happen due to the minimum size styling.
            if (width != 0 &amp;&amp; height != 0) {
                fig.request_resize(width, height);
            }
        }
    });"><pre class="notranslate">    <span class="pl-k">var</span> <span class="pl-s1">resizeObserver</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">ResizeObserver</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">entries</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">nentries</span> <span class="pl-c1">=</span> <span class="pl-s1">entries</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span>
        <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">nentries</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">var</span> <span class="pl-s1">entry</span> <span class="pl-c1">=</span> <span class="pl-s1">entries</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
            <span class="pl-k">var</span> <span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">;</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentBoxSize</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentBoxSize</span><span class="pl-kos">.</span><span class="pl-c1">inlineSize</span><span class="pl-kos">;</span>
                <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentBoxSize</span><span class="pl-kos">.</span><span class="pl-c1">blockSize</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
                <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentRect</span><span class="pl-kos">.</span><span class="pl-c1">width</span><span class="pl-kos">;</span>
                <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">entry</span><span class="pl-kos">.</span><span class="pl-c1">contentRect</span><span class="pl-kos">.</span><span class="pl-c1">height</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>

            <span class="pl-c">// Keep the size of the canvas and rubber band canvas in sync with</span>
            <span class="pl-c">// the canvas container.</span>
            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'width'</span><span class="pl-kos">,</span> <span class="pl-s1">width</span> <span class="pl-c1">*</span> <span class="pl-s1">mpl</span><span class="pl-kos">.</span><span class="pl-c1">ratio</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'height'</span><span class="pl-kos">,</span> <span class="pl-s1">height</span> <span class="pl-c1">*</span> <span class="pl-s1">mpl</span><span class="pl-kos">.</span><span class="pl-c1">ratio</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span>
                <span class="pl-s">'style'</span><span class="pl-kos">,</span>
                <span class="pl-s">'width: '</span> <span class="pl-c1">+</span> <span class="pl-s1">width</span> <span class="pl-c1">+</span> <span class="pl-s">'px; height: '</span> <span class="pl-c1">+</span> <span class="pl-s1">height</span> <span class="pl-c1">+</span> <span class="pl-s">'px;'</span>
            <span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-s1">rubberband_canvas</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'width'</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">rubberband_canvas</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'height'</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-c">// And update the size in Python. We ignore the initial 0/0 size</span>
            <span class="pl-c">// that occurs as the element is placed into the DOM, which should</span>
            <span class="pl-c">// otherwise not happen due to the minimum size styling.</span>
            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">width</span> <span class="pl-c1">!=</span> <span class="pl-c1">0</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">height</span> <span class="pl-c1">!=</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">fig</span><span class="pl-kos">.</span><span class="pl-en">request_resize</span><span class="pl-kos">(</span><span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Bug report</h3>
<p dir="auto"><strong>Bug summary</strong></p>
<p dir="auto">A simple 3D scatter plot is not working on jupyter notebook when <code class="notranslate">%matplotlib notebook</code> is enabled. However, it is working for <code class="notranslate">%matplotlib inline</code></p>

<p dir="auto">An extremely large, blank window appears that spans beyond the page.</p>
<p dir="auto"><strong>Code for reproduction</strong></p>

<div class="highlight highlight-source-python notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="%matplotlib notebook

import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D

A = np.random.random((100,3))
fig = plt.figure()
ax = Axes3D(fig)
ax.scatter(A[:,0], A[:,1], A[:,2])
plt.show()"><pre class="notranslate"><span class="pl-c1">%</span><span class="pl-s1">matplotlib</span> <span class="pl-s1">notebook</span>

<span class="pl-k">import</span> <span class="pl-s1">numpy</span> <span class="pl-k">as</span> <span class="pl-s1">np</span>
<span class="pl-k">import</span> <span class="pl-s1">matplotlib</span>.<span class="pl-s1">pyplot</span> <span class="pl-k">as</span> <span class="pl-s1">plt</span>
<span class="pl-k">from</span> <span class="pl-s1">mpl_toolkits</span>.<span class="pl-s1">mplot3d</span> <span class="pl-k">import</span> <span class="pl-v">Axes3D</span>

<span class="pl-v">A</span> <span class="pl-c1">=</span> <span class="pl-s1">np</span>.<span class="pl-s1">random</span>.<span class="pl-en">random</span>((<span class="pl-c1">100</span>,<span class="pl-c1">3</span>))
<span class="pl-s1">fig</span> <span class="pl-c1">=</span> <span class="pl-s1">plt</span>.<span class="pl-en">figure</span>()
<span class="pl-s1">ax</span> <span class="pl-c1">=</span> <span class="pl-v">Axes3D</span>(<span class="pl-s1">fig</span>)
<span class="pl-s1">ax</span>.<span class="pl-en">scatter</span>(<span class="pl-v">A</span>[:,<span class="pl-c1">0</span>], <span class="pl-v">A</span>[:,<span class="pl-c1">1</span>], <span class="pl-v">A</span>[:,<span class="pl-c1">2</span>])
<span class="pl-s1">plt</span>.<span class="pl-en">show</span>()</pre></div>
<p dir="auto"><strong>Actual outcome</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f3db3afac0a2629303b342241b9e2f53900bb6befb602fbd010887bf0e697b3d/68747470733a2f2f692e706f7374696d672e63632f335271516a7934662f53637265656e2d53686f742d323032302d30372d33302d61742d392d34342d35312d504d2e706e67"><img src="https://camo.githubusercontent.com/f3db3afac0a2629303b342241b9e2f53900bb6befb602fbd010887bf0e697b3d/68747470733a2f2f692e706f7374696d672e63632f335271516a7934662f53637265656e2d53686f742d323032302d30372d33302d61742d392d34342d35312d504d2e706e67" alt="Fail case" data-canonical-src="https://i.postimg.cc/3RqQjy4f/Screen-Shot-2020-07-30-at-9-44-51-PM.png" style="max-width: 100%;"></a></p>

<p dir="auto"><strong>Expected outcome</strong></p>
<p dir="auto">Expecting a 3D scatter plot of <code class="notranslate">A</code>.</p>


<p dir="auto"><strong>Matplotlib version</strong></p>

<ul dir="auto">
<li>Operating system: posix Darwin 19.6.0</li>
<li>Matplotlib version: 3.3.0</li>
<li>Matplotlib backend (<code class="notranslate">print(matplotlib.get_backend())</code>): nbAgg</li>
<li>Python version: 3.7.5</li>
<li>Jupyter version (if applicable):
<ul dir="auto">
<li>jupyter core     : 4.6.3</li>
<li>jupyter-notebook : 6.0.3</li>
<li>qtconsole        : 4.7.5</li>
<li>ipython          : 7.16.1</li>
<li>ipykernel        : 5.3.4</li>
<li>jupyter client   : 6.1.6</li>
<li>jupyter lab      : not installed</li>
<li>nbconvert        : 5.6.1</li>
<li>ipywidgets       : 7.5.1</li>
<li>nbformat         : 5.0.7</li>
<li>traitlets        : 4.3.3</li>
</ul>
</li>
<li>Other libraries: numpy 1.19.1, scipy 1.5.2</li>
</ul>