Streaming live at 10am (PST)

Rollover interaction is oddly effecting other elements on page


#1

Hi webflowers -

On my "tv + video" page, I have a play icon that has a hover state transition - nothing too fancy - ( it scales up a bit and goes from 50% to 100% opacity ) But, when I go to the published site... the rollover on any of these PLAY icons seems to effect all type elements below it... Did I do something dopey in class naming? kinda clueless as to what is causing this. thanks in advance for the help.

site access : https://preview.webflow.com/preview/scottbarbey7095601?preview=533b459dca018340b56b85fb4205c5d4

page view of TV + VIDEO: http://scottbarbey7095601.webflow.io/scott-barbey-video


#2

Works fine to me. Checked in Chrome on Chromebook and in Firefox on Linux.


#3

hi @sabanna - you seem to be my helping friend around here. always appreciated. I'm usually in safari. I'll check in Chrome and Firefox -- but it definitely looks odd in Safari. roll over the PLAY ICON on the top module (the Arrow) and when in rollover state (larger and brighter - glance down to other copy modules... (like night drive) and you should see the entire copy area "popping" whenever the rollover on "the arrow" occurs.

I'll hop over to Chrome and Firefox to see if it's happening there. smile


#4

Yup. Problem doesn't happen in Chrome or Firefox.
But - definitely super bizzaro in Safari though... smile

So - I guess it's a bug?


#5

Hi @scottbarbey, thanks for your update. I took a look at the site and tested in firefox. It seems there is some transistion property on the icon, that is causing that flashing.

Can you try to remove the transistion, then republish and test in safari? Cheers, Dave


#6

@cyberdave

Yes... I'm almost sure that is the issue. But why?
I want to have the icon at 50% opacity and on rollover
go to 100% opacity and grow a bit. Is this something I should't do?

SB


#7

Hi @scottbarbey, I am not sure why the text is blinking like that in Safari with those hover states they way they are, it might be just something in safari.

As an alternative you can create a hover interaction on the icons, you can create one interaction and assign it to all of your icons, and not have to set as many styles smile

I made a quick video :

I hope that helps smile Cheers, Dave


#8

I will give it a shot.

Gotta say - creating a vid demo for me just shows how totally awesome web flow is.
AMAZING.
really love your site/service.


#9

@cyberdave -
wanted to say thanks again for the video... really awesome service you guys and gals provide.

Sadly, the problem still occurs. frowning
My sense from your earlier posts is that it is a bug in Safari... not a bug in web flow... is that correct?

SB


#10

Hi Scott, have you already made the changes to the site with the interaction? In my testing, I was able to get it to work, so I would like to see how you have that setup smile


#11

yup.
I actually did two transitions...
on THE ARROW section, the INTERACTION has both scale and opacity... and still causes the problem.
on NIGHT DRIVE section, I created an interaction of opacity only - no scale change - and it has stopped effecting the lower modules...

things to note:
the icon is a png - in a lightbox container - nested in a div.
the problem only occurs in Safari. I've got Safari 7.1.7

hope that helps.

again - thanks.


#12

sharing:

https://preview.webflow.com/preview/scottbarbey7095601?preview=533b459dca018340b56b85fb4205c5d4


#13

Hi @scottbarbey, thanks, I just took a look at the read-only link, but I do not see where the opacity or transition states have been removed for active and hover states. Yet there is still an interaction defined. Could you also try to remove those styles for opacity and transistion on the active state, and remove the .75 scale on the hover state?

Had you already tried that? I will check it again.

Cheers,
Dave


#14

thanks dude. working now. sorry for the delay...


#15