My Website is Mirror-flipped on iPhone Devices

by

The issue that you are facing is because you are trying to flip the content. When you use the transform rotate property, on IOS, you are seeing the flipped content. The solution is to use backface-visibility.

.card .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

An element’s back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space.

You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

More Related Contents:

  1. Which way to implement this picture in HTML CSS code and bootstrap
  2. Trying to work on responsiveness of login form
  3. Bootstrap row with columns of different height
  4. How can I “disable” zoom on a mobile web page?
  5. Bootstrap 4: Multilevel Dropdown Inside Navigation
  6. background: fixed no repeat not working on mobile
  7. Make an image responsive – the simplest way [duplicate]
  8. Animate/Shrink NavBar on scroll using Bootstrap
  9. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  10. How to center nav-items in Bootstrap? [duplicate]
  11. Create a responsive navbar sidebar “drawer” in Bootstrap?
  12. Bootstrap 4 row fill remaining height
  13. Bootstrap 4 Cards of same height in columns
  14. Turn off iPhone/Safari input element rounding
  15. How to make Bootstrap 4 cards the same height in card-columns?
  16. Bootstrap – align button to the bottom of card
  17. Bootstrap 4 – Sticky footer – Dynamic footer height
  18. Bootstrap 4 – Responsive cards in card-columns
  19. How to center cards in bootstrap 4?
  20. Add spacing between vertically stacked columns in Bootstrap 4
  21. Bootstrap navbar link color won’t change
  22. Responsive order confirmation emails for mobile devices?
  23. Empty vertical space between columns in Bootstrap 4
  24. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  25. Bootstrap navbar: nothing is displayed on smaller devices
  26. Why are some of my CSS rules not working?
  27. Auto height on parent container with Absolute/Fixed Children
  28. Why aren’t my bootstrap 4 columns the same height?
  29. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment