Streaming live at 10am (PST)

Some browser issues


#1

Just trying to wrap up my latest Webflow build and am noticing a few issues that I am trying to clear up.

Published Site:
https://webflow.com/website/Odyssey-Design-Studio

(1) Browser Issue
On my home page I have a "pressing" effect that fades out my overlay to reveal the image below it. On chrome it works great but with other browsers (Firefox and IE) it doesn't have the fade ease. Not to sure if these is just a Webflow effect that only works on Chrome or now.

Much appreciated,
Luke


#2

You are using the "Pressed" status to achieve a sustained click event. That's really great it works on Chrome but I think that's pretty normal it doesn't on ffox and IE who are only waiting for a click for this event. A sustained click usually relies on Javascript.

edit: cool effect though, I like the ambiance of the hero section a lot.

edit: after playing with it a bit I think you wouldn't lose a lot of the feeling by doing this on :hover... and it would work almost better as I'm pretty sure no-one is going to sustain a click on the boat... I had to know what I was looking for to unveil the effect.


#3

I was thinking about hover, I just really wanted to have it "user controlled". I figured the the left click icon on the overlay would help viewers identify that interaction.

But I will try out your suggestion to see how I like it!

Thank you


#4

Hi @LukeB, Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile


#5

I thought the read only link was in the published project? Sorry about that:
https://preview.webflow.com/preview/odysseydesigns?preview=05fe303220063790411c4a0c3476fd46

I can't really provide screenshots for this issue as it is an action that I am having issues with. Not to sure how to explain it further but maybe this will help.

-When going to the site, on the homepage you will see a graphic with an interaction on it and below it you see an image peeking through

-On Chrome when you left click and hold you will see that overlay fade out and the image behind it appear.

-If you do that same action on Firefox or IE, instead of fading, it just instantly hides that overlay.

I know that these actions (ex. hover) work across all browsers so not sure why this one isn't.

Thank you


#6

Hi @LukeB, here is one thing you can try, on the transition timer, set the easing of the rotations to linear. Do that for all your rotation triggers. Try that and see if it helps, if you get stuck, let me know smile

Cheers, Dave


#7

Still seeing the issue.

The issue I see is with the control on the frame overlay state pressed on IE and Firefox.


#8

Hi @LukeB, ok thanks for trying that. I had seen some other issues in Firefox and IE with those easings, but apparently that is not it :-/ Well I will be happy to take another look to see what I can find out smile


#9

Thank you very much! It's just minor, doesn't ruin the site or anything but would be nice to have it work on firefox and ie!


#10

Hi @LukeB, I understand. Sometimes those can be tricky to troubleshoot. The effect is quite neat smile I will do my best and keep checking. If you get any new info, let me know smile Cheers, Dave


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.