Fails to render tables with tabs in Firefox
akash-akya opened this issue · comments
Narrowed down the error to the following case:
# Tab rendering issue with Firefox ```elixir Mix.install([ {:kino, github: "livebook-dev/kino"} ]) ``` ## Tabs with table ```elixir Kino.Layout.tabs( Foo: "foo", Bar: Kino.DataTable.new([%{name: "Elixir"}]) ) ```
Out of two tabs, first tab is rendered properly. But fails to render second tab Bar
. The issue only seems to appear in the Firefox, couldn't reproduce this in chrome. Also, the issue does not appear if the second table is not a table, or if the table is empty.
Screen.Recording.2022-12-20.at.1.01.34.PM.mov
Seeing the following error in the console. The issue might be related to how Firefox handles element with display: none
.
Uncaught
Exception { name: "NS_ERROR_FAILURE", message: "", result: 2147500037, filename: "http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js", lineNumber: 185, columnNumber: 0, data: null, stack: "measure/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:73\nmeasure@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:64\naE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64557\nLz/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64672\nLz@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64663\neE/</m</<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:66121\neE/</m<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:65954\neE/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:66178\ntc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:23919\nu6</lt.useMemo@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:6861\neE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:65804\nQE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:6554\nlh@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:19536\nM7@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:1576\nCc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:46367\nRc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:40033\nIH@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:39961\nMl@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:39813\nA7@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:36907\nle@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:3274\nDH@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:41567\nAe@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:40526\nwc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:35950\nu3@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:8884\nc3@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:9277\n" }
columnNumber: 0
data: null
filename: "http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js"
lineNumber: 185
message: ""
name: "NS_ERROR_FAILURE"
result: 2147500037
stack: "measure/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:73\nmeasure@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:64\naE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64557\nLz/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64672\nLz@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:64663\neE/</m</<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:66121\neE/</m<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:65954\neE/<@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:66178\ntc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:23919\nu6</lt.useMemo@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:6861\neE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:176:65804\nQE@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:185:6554\nlh@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:19536\nM7@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:1576\nCc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:46367\nRc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:40033\nIH@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:39961\nMl@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:39813\nA7@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:36907\nle@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:6:3274\nDH@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:41567\nAe@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:40526\nwc@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:8:35950\nu3@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:8884\nc3@http://localhost:8080/public/sessions/hbhqhox63k4vaoqhndgdqt7kmn6nlcgc4ezjjuhd/assets/ju5acigzrsntxwksbzo74ydg2q/main.js:1:9277\n"
<prototype>: ExceptionPrototype { toString: toString(), name: Getter, message: Getter, … }
main.js:8:41392
Firefox version: 108.0 (64-bit)
OS: macOS 12.5
Thank you! Btw, what is your Livebook version?
EDIT: Nevermind, I was able to reproduce on latest Livebook too.
This looks like a Firefox bug, specifically this one. The new datatable uses Glide Data Grid, which uses canvas and we also have it in an iframe.
Hey @jonatanklosko! This happens specifically in the getCellsForSelection
callback. If the DataTable had a way of knowing that it’s in a tab, I could disable it only in these cases and everything else would work fine. Or even better, keep it disabled just until the tab is selected/visible.
Without the getCellsForSelection
CleanShot.2022-12-24.at.00.46.29-converted.mp4
Could we detect if the table itself is being rendered or under display: none
and act differently based on that?
@josevalim I guess not directly because it's in an iframe and the hidden element is out of it. 🤔
@cristineguadelupe so the bug only happens if the table is on the second tab. I wonder if we could address this by lazy loading the contents. We only load the contents of a tab the first time it is rendered. It can even help with using fewer resources?