When developing my Memory Matching game, I came across both of these issues within a few minutes of each other. Here's how I solved the issues with Layered Opacity (in general), then Transform Rotation (in the Safari browser).
To clarify
- The opacity issue was in all browsers (that I tested).
- The issue with transform rotation was only in Safari (that I tested).
Thanks to some amazing people on Stack Overflow, I got the issues resolved rather quickly ...
Issue with Layered Opacity
Basically, I had set opacity to 0.85 on the "modal" that I was creating. I decided to create a 0.5 opacity wrapper that covered the remainder of the screen (this is something that I've done MANY times on several projects without issue) ... that's where the problem occurred.
What I got was a 0.5 opaque wrapper with an equally opaque modal ... not what I wanted.
A quick search found ...
The problem you probably have (based on looking at your selectors) is that opacity affects all child elements of a parent:
div
{
background: #000;
opacity: .4;
padding: 20px;
}
p
{
background: #f00;
opacity: 1;
}
http://jsfiddle.net/Kyle_/TK8Lq/
But there is a solution! Use rgba background values and you can…
Problem solved ...
... got the app working the way I wanted. Then I pushed to production and notified the world that I had a new game for people to try out. Loaded it onto my son's android ... while my wife loaded it on her iOS phone.
"It doesn't work," said my wife.
Me, "it doesn't work?" It works on my linux machine. It works on Android.
Me again, "What's it doing?"
"It doesn't work," said my wife.
After some careful questioning, the card-flip wasn't working. I then loaded the app onto my iOS phone so that I could say, "It works on my phone."
It didn't work on my phone ...
Issue with Transform Rotate
This whole project started with an article I came across that showed how to execute a card-flip with CSS: Card Flip. The visual was exactly what I was looking for.
Everything was going well and my application doing what I expected.
Then, I tried to load the Progressive Web Application (PWA) on my phone ... and the card-flip broke. A rotation occurred, just showing the same image on both sides.
Another search came up with this ...
Working in Safari 10.1.1, I am given the error that I must use the -webkit- prefix for backface-visibility. You can see this in the browser's console, when you inspect an element (right-click inspect). There is a little yellow triangle with an exclamation point next to it next to backface-visibility…
Conclusion
Problem solved.
Had my wife load the app and verify that it was working. Reloaded it on my son's phone to verify I hadn't broken something else.
Notifications updated to tell everyone it was working correctly.
Wrote this article ...
Top comments (0)