Why does this happen in Firefox?

I have created a flip card here:

https://preview.webflow.com/preview/bloginsights?preview=8e800fc4337e33c9134947b835cb79b5

If you click on the card it flips. Click it again and it flips back. However, when you are in Firefox the yellow outline on the front card disappears!! It comes back when you scroll the page but disappears again. Strange!!

And this only happens in Firefox - work fine in all other browsers!

Would really like to figure this one out so any help would be much appreciated.

Hey @rajsidhu, we might need the real published url in order to see the script working. In preview mode you cant see external scripts running.

Daniel

Yeah sorry its:-

http://bloginsights.webflow.io/

Thanks @Daniel_Schultheiss

1 Like

the outline around the $38,000ā€¦
it rep-appears in FF, Chrome, and Safari
without scrolling

however with FF it seems to hesitate then blink when the page re-appears.

video:

http://quick.as/mv9vc1x7q

@Revolution

Ahh, well on my Firefox the outline doesnā€™t re-appear until you scroll. In your video it is acting differently in Firefox compared to mine. So, would this mean it might be an issue with my Firefox install?

probably yes.

Iā€™m running Firefox 40.0.3 on Mac

check your version.

Iā€™m running Firefox 41.0 on Windows 7 Pro

If it may be a local issue with my Firefox install (a plugin or add-on conflict or something) then would you say I donā€™t need to worry about the issue with the outline not appearing properly?

I just open your site on the following:
Windows 7 Pro FireFox 33.0.3
Windows 7 Pro FireFox 34.0.5

and had the same results as a Mac / Firefox 40.0.3

Outline appears but is slow to re-appear when the card flips back over.

So I another Mac running Windows 7 Pro / Firefox 41.0 via Parallels.

No outline this time. Same problem you encountered

Firefox may introduced a bug on the windows sideā€¦ but not the Mac.

Video:
http://quick.as/dbyns326a

And I forgotā€¦ your site works with FF and Chrome on an iPad as well.

Hi @Revolution

Your video shows exactly what I am seeing. Outline doesnā€™t re-appear.

Also your right, everything works ok on mobile devices. It even works fine on Firefox for Android!

So it seems to be a problem with Firefox v.41.0 on Windows 7.

With that being said then, is this something I cannot control on my end so if I publish my project should I just ignore this issue? What do you suggest?

Iā€™m thinkingā€¦ itā€™s a problem with Firefox. Will probably be fixed over time.

Why not try an alternative approach.

Instead of having JS draw something around the textā€¦

Use an image for the background instead.
or try placing another div with a border under the $38,000

Personally, I hate releasing a site with a known bug.

Iā€™d rather find a solution - even if itā€™s not the best or prettiestā€¦ but works.

@Revolution I agree, Iā€™d rather find a fix if I can before I publish to my site.

Can you just explain how I would do your suggested fix?

give me a preview link - will see if I can throw something in there.

Iā€™m donā€™t think I can upload an image to a preview though.

@Revolution here is a preview link:-

https://preview.webflow.com/preview/bloginsights?preview=8e800fc4337e33c9134947b835cb79b5

Iā€™m assuming that the image to replace the outline as you suggest would not be a big file size?

the image would tinyā€¦ a few kilobytes - and once downloaded - would be re-used.

it seems the issue is how firefox draws the borderā€¦
try this insteadā€¦ maybe use a yellow background in addition to the border to see what happened (in profit).

If the yellow background shows up all the time - then that could work in place of the border.

Since itā€™s a preview - I canā€™t publish the site to test in FF. So you have to test it.

video:
http://quick.as/QZAqT7zbY

@Revolution - Just implemented your suggestion. Take a look at the preview again. Itā€™s still behaving ā€œbadlyā€. In the meantime iā€™m going to try your other suggestion and create an image.

the last change definately didnā€™t work.

perhaps this willā€¦ http://quick.as/6Y5khQZ5D

Basicallyā€¦ I added a div and moved the profit text inside it.

The profit text no longer has a borderā€¦ the div does.

So - I removed the problem from text - will see if the problem is in how FF renders a border / background around text.

If the problem continues - and exists with a border around a divā€¦ then thereā€™s really nothing you can do.

Except maybe the image route.

Just tried that and it didnā€™t work either.

ok. since pure css didnā€™t workā€¦ then you are left with the jquery route or an image

I canā€™t do the jquery route now because of a time scheduleā€¦

but I would look at reloading the profit element with jquery by forcing a redisplay

something like this

$(ā€œ#changePanelā€).click(function() {
var data = ā€œ$38,000ā€;
$(ā€œ#profitā€).hide().html(data).fadeIn(ā€˜fastā€™);
});ā€‹

If you donā€™t know jqueryā€¦ then the faster / easier route would be an image.

@Revolution - just tried the image route and guess what? That doesnā€™t work either :confused:

Firefox really seem to be messed up somewhere!!

Where would I place this code?