Skip to main content
R
REELHERO
Inspiring
August 19, 2022
Question

responsive hover bug

  • August 19, 2022
  • 2 replies
  • 769 views

hey gang - As you guys know I made my site responsive  finally - and it works in most ways the only thing i cant figure out..

 

this page

https://toddheymandirector.com/reel/

 

My rollovers work on desktop and on a mobile/tablet developer tools simulator, the overlay doesnt show and one tap and it takes you to the movie page - however on an ACTUAL phone/mobile its not functioning properly

 

the movie doesnt show but it still is recognizing a hover function and transitions to black on touch - if you hit it a second time it goes to the movie page-- which obviously is ng since no one will know to do that--

 

and on tablet it will either play the rollover or just requires a second tap--

 

see attached for both--

 

the idea I would think is to have the hover function not even exist for mobile so one tap takes you to the movie page-- 

 

not sure if a media query for touch screen preventng the hover function will do that bc it seems one for screen width isnt cutting it..

 

thoughts?

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    August 19, 2022

    Youre probably looking on an iPhone or iPad iOS as it functions ok on an Android device, the onclick part does anyway, which takes you to the relevent movie on the movie-player page. Obviously the hover effect isnt going to work on mobile devices.

     

    Unfortunatley I have no experience of Apple device anonymity situations but they seem to have more than their fair share of issues when it comes to browser compatibilities. Apple is the new Microsoft - a PITA, as witnessed by its massive security flaws today.

     

    The idea on mobile would be to ditch the movies behind the overlay image and just have the overlay image and a click function which takes you to the movie page. I dont really see the point in having the movie behind the image anyway either on desktop or mobile as you have a stand-alone movie player to handle the movies.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 19, 2022

      Add to that the wild differences between last generation iOS vs new generation iOS and how various browsers (Safari, FF, Chrome) behave.

       

      Nancy O'Shea— Product User & Community Expert
        R
        REELHEROAuthor
        Inspiring
        August 19, 2022

        PITA lol. Im using that its great--

         

        i hear you both  (Nancy i 100% imagined you waiting for this moment to say I told you so.. 😉

        Im not unaware of the complications.. as you must have figured out by now Im stubborn and willful.. 

         

        Im sure youre sick of this site but its the high bar in the commercial production biz and they manage to have it animate on desktop and static on mobile seamlessly so Im chasing that thoroghbred:

         

        https://smugglersite.com/global/commercials/lucy-forbes/bbc-this-is-going-to-hurt-trailer

         

        as for the reason - its a 3 second teaser to draw you in - to look at a spot you might otherwise skip over- exactly as they do above and I know for a fact its effective -- and desktop is king..  so I will keep trying until i have to give up..

         

        appreciate your observations though!

        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        August 19, 2022

        I saw this coming initially.  If you'll remember, I said this HOVER effect was all for naught and would not work right on a responsive website.  Now you know why. 😉

         

        Emulators are not a reliable test of actual devices.  The manner in which people use mobiles is different from desktops. 

         

        I build for mobile first because it supports the widest audience based on my user device data. 

         

        Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices