Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS transform and z-index bug on hover in iOS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #286773
    MavicNZ
    Participant

    Checkout the code here: https://codepen.io/W3-design/pen/pBOJyy

    When I hover over the images on desktop the CSS transition works correctly, it rotates the image and changes the z-index to bring the hovered image to the foreground, the same behaviour doesn’t happen when I “hover/tap” each image in iOS in both Safari and Chrome the CSS transition is OK but the z-index is all messed up.

    You’ll notice when the page loads that the z-index on iOS is not honoured at all and the images are displayed in markup order :(

    I would like the iOS “hover/tap” result to be the same as the desktop.

    NOTE: I have read some posts about adding translate3d to the img CSS but this doesn’t work if you have multiple transforms like I want.

    This fixes the z-index issue without the other transforms:
    -webkit-transform: translate3d(0,0,0);

    This doesn’t fix the z-index issue:
    -webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.