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.
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.
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
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?
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
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
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
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.
