Some parts of the back shows on the front

[rhazegh]

Thank you for making this. It works very well. I just found a little bug that I would like to report here.

• Browser: Chrome Version 65.0.3325.162 (Official Build) (64-bit)
• OS: macOS High Sierra Version 10.13.3

When the screen size goes lower than a specific size, some elements from the back of the card show up on the front! (mirrored). I have put them in red boxes below.

Any clue what's happening here?

Screen width <= 768px

Front

Back

---

Screen width > 768px

Front

back

[rhazegh]

I found out that some elements inside the card had position: relative. After I changed this to position: static the problem went away.

I am still not sure why this is happening. Curious to find out what's going on. 😄

[rhazegh]

Hum, that only addressed the issue for some special cases. There are other elements on the back of some cards that still show up on the front. 😞

[AaronCCWong]

Thanks for looking into this. Do keep me updated if you figure out the issue. I also welcome PRs if you manage to find a fix. Otherwise, I will need to look at this sometime during the coming weekend.

[AaronCCWong]

@rhazegh Is there any styling on the elements that are showing through the card?

[rhazegh]

@AaronCCWong Yes. There is a lot of styling going on. It is showing formulas using KaTex (https://khan.github.io/KaTeX/).

Here is an example:

The following HTML is the the formula that is rendered on the back but appears on the front as well (backwards):

<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msub><mtext><mi
    mathvariant="normal">S</mi><mi mathvariant="normal">h</mi><mi mathvariant="normal">a</mi><mi
    mathvariant="normal">r</mi><mi mathvariant="normal">p</mi><mi
    mathvariant="normal">e</mi></mtext><mtext><mrow><mi mathvariant="normal">H</mi><mi
    mathvariant="normal">F</mi><mtext>&nbsp;</mtext><mi mathvariant="normal">A</mi><mi
    mathvariant="normal">n</mi><mi mathvariant="normal">n</mi><mi mathvariant="normal">u</mi><mi
    mathvariant="normal">a</mi><mi mathvariant="normal">l</mi><mi mathvariant="normal">i</mi><mi
    mathvariant="normal">z</mi><mi mathvariant="normal">e</mi><mi mathvariant="normal">d</mi></mrow></mtext></msub><mo>=</mo><mfrac><mrow><mtext><mi
    mathvariant="normal">A</mi><mi mathvariant="normal">n</mi><mi mathvariant="normal">n</mi><mi
    mathvariant="normal">u</mi><mi mathvariant="normal">a</mi><mi mathvariant="normal">l</mi><mi
    mathvariant="normal">i</mi><mi mathvariant="normal">z</mi><mi mathvariant="normal">e</mi><mi
    mathvariant="normal">d</mi><mtext>&nbsp;</mtext><mi mathvariant="normal">r</mi><mi
    mathvariant="normal">e</mi><mi mathvariant="normal">t</mi><mi mathvariant="normal">u</mi><mi
    mathvariant="normal">r</mi><mi mathvariant="normal">n</mi></mtext><mo>−</mo><mtext><mi
    mathvariant="normal">A</mi><mi mathvariant="normal">n</mi><mi mathvariant="normal">n</mi><mi
    mathvariant="normal">u</mi><mi mathvariant="normal">a</mi><mi mathvariant="normal">l</mi><mi
    mathvariant="normal">i</mi><mi mathvariant="normal">z</mi><mi mathvariant="normal">e</mi><mi
    mathvariant="normal">d</mi></mtext><mspace width="0.16667em"></mspace><msub><mi>r</mi><mi>f</mi></msub></mrow><mrow><mtext><mi
    mathvariant="normal">a</mi><mi mathvariant="normal">n</mi><mi mathvariant="normal">n</mi><mi
    mathvariant="normal">n</mi><mi mathvariant="normal">u</mi><mi mathvariant="normal">a</mi><mi
    mathvariant="normal">l</mi><mi mathvariant="normal">i</mi><mi mathvariant="normal">z</mi><mi
    mathvariant="normal">e</mi><mi mathvariant="normal">d</mi></mtext><mspace
    width="0.16667em"></mspace><mi>σ</mi></mrow></mfrac></mrow><annotation
    encoding="application/x-tex">\text{Sharpe}_\text{{HF Annualized}}=\frac{\text{Annualized return}-\text{Annualized}\,r_f}{\text{annnualized}\,\sigma}</annotation></semantics></math></span><span
    class="katex-html" aria-hidden="true"><span class="strut" style="height:1.37144em;"></span><span
    class="strut bottom" style="height:2.05744em;vertical-align:-0.686em;"></span><span
    class="base displaystyle textstyle uncramped"><span class="mord"><span
    class="text mord displaystyle textstyle uncramped"><span class="mord mathrm">S</span><span
    class="mord mathrm">h</span><span class="mord mathrm">a</span><span class="mord mathrm">r</span><span
    class="mord mathrm">p</span><span class="mord mathrm">e</span></span><span class="vlist"><span
    style="top:0.24444em;margin-right:0.05em;"><span
    class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span><span
    class="reset-textstyle scriptstyle cramped"><span class="text mord scriptstyle cramped"><span
    class="mord scriptstyle cramped"><span class="mord mathrm">H</span><span
    class="mord mathrm">F</span><span class="mord mspace">&nbsp;</span><span
    class="mord mathrm">A</span><span class="mord mathrm">n</span><span class="mord mathrm">n</span><span
    class="mord mathrm">u</span><span class="mord mathrm">a</span><span class="mord mathrm">l</span><span
    class="mord mathrm">i</span><span class="mord mathrm">z</span><span class="mord mathrm">e</span><span
    class="mord mathrm">d</span></span></span></span></span><span class="baseline-fix"><span
    class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span>&#8203;</span></span></span><span
    class="mrel">=</span><span class="mord reset-textstyle displaystyle textstyle uncramped"><span
    class="sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter"></span><span
    class="mfrac"><span class="vlist"><span style="top:0.686em;"><span
    class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span><span
    class="reset-textstyle textstyle cramped"><span class="mord textstyle cramped"><span
    class="text mord textstyle cramped"><span class="mord mathrm">a</span><span class="mord mathrm">n</span><span
    class="mord mathrm">n</span><span class="mord mathrm">n</span><span class="mord mathrm">u</span><span
    class="mord mathrm">a</span><span class="mord mathrm">l</span><span class="mord mathrm">i</span><span
    class="mord mathrm">z</span><span class="mord mathrm">e</span><span class="mord mathrm">d</span></span><span
    class="mord mspace thinspace"></span><span class="mord mathit"
                                               style="margin-right:0.03588em;">σ</span></span></span></span><span
    style="top:-0.22999999999999998em;"><span class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span><span
    class="reset-textstyle textstyle uncramped frac-line"></span></span><span style="top:-0.677em;"><span
    class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span><span
    class="reset-textstyle textstyle uncramped"><span class="mord textstyle uncramped"><span
    class="text mord textstyle uncramped"><span class="mord mathrm">A</span><span
    class="mord mathrm">n</span><span class="mord mathrm">n</span><span class="mord mathrm">u</span><span
    class="mord mathrm">a</span><span class="mord mathrm">l</span><span class="mord mathrm">i</span><span
    class="mord mathrm">z</span><span class="mord mathrm">e</span><span class="mord mathrm">d</span><span
    class="mord mspace">&nbsp;</span><span class="mord mathrm">r</span><span
    class="mord mathrm">e</span><span class="mord mathrm">t</span><span class="mord mathrm">u</span><span
    class="mord mathrm">r</span><span class="mord mathrm">n</span></span><span class="mbin">−</span><span
    class="text mord textstyle uncramped"><span class="mord mathrm">A</span><span
    class="mord mathrm">n</span><span class="mord mathrm">n</span><span class="mord mathrm">u</span><span
    class="mord mathrm">a</span><span class="mord mathrm">l</span><span class="mord mathrm">i</span><span
    class="mord mathrm">z</span><span class="mord mathrm">e</span><span class="mord mathrm">d</span></span><span
    class="mord mspace thinspace"></span><span class="mord"><span class="mord mathit"
                                                                  style="margin-right:0.02778em;">r</span><span
    class="vlist"><span style="top:0.15em;margin-right:0.05em;margin-left:-0.02778em;"><span
    class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span><span
    class="reset-textstyle scriptstyle cramped"><span class="mord mathit"
                                                      style="margin-right:0.10764em;">f</span></span></span><span
    class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span>&#8203;</span></span></span></span></span></span><span
    class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span
    style="font-size:0em;">&#8203;</span></span>&#8203;</span></span></span><span
    class="sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter"></span></span></span></span></span></span>
</p>

CSS file for KaTeX is attached: katex.min.css.zip

katex.min.css.zip

[AaronCCWong]

Could you provide a JSFiddle that reproduces this bug?

I suspect that Katex is overwriting css that is required for the elements in the back of the card to stay hidden.

[rhazegh]

Almost there, but I am having problem with importing react-card-flip. https://jsfiddle.net/zs3uh9wo/28/

I can add card content after this is resolved. How do you import react-card-flip on JSFiddle?

[rhazegh]

@AaronCCWong Also added the content to the front and back. We only need to figure how to import react-card-flip on JSFiddle. Any idea?

https://jsfiddle.net/zs3uh9wo/33/

[rhazegh]

The fix was rather simple 😄

.react-card-back {
    z-index: -1;
}