Streaming live at 10am (PST)

On hover freaks out with "card flip" in an absolute parent


#1

So I am trying to make a card flip menu, and I've used flexbox to arrange the squares I want to flip inside of a div set to absolute right justified (it slides into view when you click a button). The parent flex box sitting in the Absolute Right justified div contains the cards.

The card flip itself works, the problem is "on hover" trigger has about 10k plots inside the div that Chrome registers as mouse movements.

I believe it is because two stacked Absolute divs as the cards over an Absolute slide element.

I just want to know if this is a bug or a consequence of how I've set it up and if I should abandon and consider it a constraint.

I've included a OneDrive video link here


#2

Hi @NewInBoston, could you provide more details about this, so that we have more accurate conditions that produces the bug? Thank you!


#3

Thanks for getting back to me. I'm still testing variations in the build but will post more details as soon as I'm done.


#4

Ok, I spent considerable time rebuilding the process according to the tutorial here.

In my specific project, I'm technically unable to reproduce the bug as I haven't been able to find a method of the card flip that displays correctly to compare it to. Any configuration I try results in a distorted perspective (inherited from 1200px, 50/50). Again, only on mouse over.

Perspective flip works fine if triggered by a button click. Is there a way I can share a link to a copy of the site for you to edit yourself without making it "showcased"?

Thanks for your help!


#5

You can share your Read-Only link here or in a private message :slight_smile:


#6

Thanks, I'm rebuilding it once more and have cleaned up the project quite a bit. I'll post it as soon as I have a broken demo for you to try :slight_smile:


#7

Ok gentleman, here is my preview link.

So my site has trailing forced heights of 100% starting from the top to get my BG movie full screen. Not sure why I had to do that, but I think the accumulation of heights caused some really weird perspective distortion.

I rebuilt the card flip in a column module rather than absolute positioned flyout menu. That didn't help initially, but what did help was then clearing Chrome cache and history including images. That at least allowed me to see it work in preview.

Changing the height of the parent container "servicesCallout" which is the parent perspective from 100% to Auto fixed a tilting skew that shouldn't have existed based on 1200 50/50. So maybe that's something.

Verdict? Who knows! But it works now. Feel free to take a look and if you have suggestions on making perspective behave better I'd like to know. I think using width and height to 100% rather than setting padding and margins is what caused me trouble.

Thanks for the help!


#8

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