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
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:
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 
Firefox really seem to be messed up somewhere!!
Where would I place this code?