Have you been able to reproduce this issue on your end? Please let me know if you need any additional information.
Plugin Author
wpsoul
(@wpsoul)
Hi. Can you write me why do you use 3d Flip for query? It has a sense for features and info blocks, but no sense for query, because hover effect is not working in mobiles and your users will not be able to enter into posts in such scenario
My current project is a reference site for long-distance hiking trails. In the project each photo has its own post which displays supporting information about the image (author, when taken, brief description, and so on).
Other items can have one or more photo posts associated with them based on a combination of category (‘Photo’) and tags. The query loop pulls the photos associated with item.
For example, I might have an item for a town and various photos of things in the town. The town would pull all posts with a category of ‘Photo’ and a tag with a code representing the city.
Each result in the query loop uses a Flip 3D Container to display the photo and, during the hover effort, some details about the photo all in a nice grid layout. The result is also linked to the underlying post. That way, desktop users can interact with most of the key metadata for a photo without having to transition to the photo’s post. Mobile users, though, would simply tap on the photo to open the photo’s post if they want to see the metadata.
The strange thing is that everything worked exactly as I wanted until a few weeks ago. Then it started having the problem described in the post (and illustrated in the screenshot I posted to the Facebook group), where the ‘rear’ of the flip card was getting displayed through the ‘front’ photo. You mentioned in the Facebook group that nothing’s been changed regarding containers but something has been changed somewhere (maybe in the query loop builder?) since it no longer works even in the simple ‘reproduce’ case listed above.
Any guidance on this would be very much appreciated as I hope to have a preliminary site launched very shortly.
Plugin Author
wpsoul
(@wpsoul)
Both container and query was not changed, changes can be in browser. Better if you send me direct link and I can give you exact answer
OK. Might be a few days until I can set something up. I will post a link when I can.
Actually, I’ve set up WordPress on a spare domain and added GreenShift. Here’s a link to a page constructed as in my ‘reproduce’ steps above and which shows the issue:
http://caminopedia.com/2023/01/03/test-3d-flip-with-query-loop/
Plugin Author
wpsoul
(@wpsoul)
Maybe I don’t understand how it should look, but for me it’s working properly
https://monosnap.com/file/WFgdL0BQVLeOuIjofFM6mYhG6HH0tj
Interesting. What browser and O/S were you using during your test?
I was using Chrome on a Mac and I get the ‘see through’ problem shown in my screenshot that I posted on the Facebook group. But I just tried the site with Safari and I don’t get the error.
Any ideas on what would cause the ‘back’ to be visible through the ‘front’ on Chrome but not on Safari?
I’ve updated the test page to show a screenshot beneath the 3D Flip Container, showing what I see using Chrome on a Mac.
http://caminopedia.com/2023/01/03/test-3d-flip-with-query-loop/
Plugin Author
wpsoul
(@wpsoul)
Tested again, in chrome, firefox, safari, even tried on phone, no issues at all. However, if I remember, one of our client has similar problem and he fixed this by removing Shift Z option in Advanced – Css transition for elements which have such problem (text and button in your case)
Thanks for the follow-up. The only platform I experienced the problem on was MacOS. On Windows or mobile, it didn’t happen.
I’ve already changed my design to not use the flip container given that I couldn’t resolve the issue, but I just tested the Shift Z fix you mentioned and it worked. So that info might help anyone else who encounters the issue. If I ever decide to use the flip container in another project, I will keep this in mind.
Thanks again. You can close this issue now.
