Running into faulty behaviour trying out flex. Sadly I couldn't find a fix for it just yet.
I first mapped the data to the content but because of the faulty behaviour I tried rewriting it resulting in the code how it is now.
There are 2 issues I can't seem to find a fix for.:
First, on load flex is not executed, it needs a reflow to wake up.
Second, larger text causes most of the time wrong positioning and needs sometimes several switching through other content to get it shown properly. Going through several times more can cause it to show faulty again.
Am I missing something?
I am causing reflow, by changing the slide Position that is kept in a store.
A small imageroll for a quick overview of the issue. The last 3 images basically show the behaviour that should be happening but somehow isn't. All images are one sessions and going through them with the cubes.
with
const [state, setState] = useState(true) useInterval(() => setState((s) => !s), 1000)
the called reflow fixes the issue. But why doesn't it properly show it to begin with?
Running into faulty behaviour trying out flex. Sadly I couldn't find a fix for it just yet. I first mapped the data to the content but because of the faulty behaviour I tried rewriting it resulting in the code how it is now.
There are 2 issues I can't seem to find a fix for.: First, on load flex is not executed, it needs a reflow to wake up. Second, larger text causes most of the time wrong positioning and needs sometimes several switching through other content to get it shown properly. Going through several times more can cause it to show faulty again. Am I missing something? I am causing reflow, by changing the slide Position that is kept in a store.
https://codesandbox.io/s/lively-browser-hz0yj?file=/src/App.js Working Code here. The 3 cubes are "back", "reset", "next"
A small imageroll for a quick overview of the issue. The last 3 images basically show the behaviour that should be happening but somehow isn't. All images are one sessions and going through them with the cubes.
with
const [state, setState] = useState(true) useInterval(() => setState((s) => !s), 1000)the called reflow fixes the issue. But why doesn't it properly show it to begin with?