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?