There is an example: http://jsfiddle.net/ywgycw1L/6/

It looks like this: enter image description here on the left - safari 5.1.7, on the right - firefox

How to make the mapping the same?

The block inside (gray) is required to maintain absolute positioning and transformation.

.outer { width: 200px; height: 200px; border-radius: 50%; -webkit-border-radius: 50%; border: 5px solid red; position: relative; overflow: hidden; } .inner { position: absolute; left: -100%; top: -100%; width: 300px; height: 300px; transform: rotate(108deg) skew(-50deg); -webkit-transform: rotate(112deg) skew(-50deg); transform-origin: 100% 100% 0; -webkit-transform-origin: 100% 100% 0; background: #ccc; }
  • In Safari Version 9.0.1 (11601.2.7.2), an example of a link is displayed as in the right image. - dzhioev
  • Try wrapping these two elements in one more parent element. And here, too, specify overflow: hidden; Try to register the height and width first, because try to remove the width . And the second option. Try to remove the width from .outer - HoPkInS
  • Alas, does not help - Andrew Talanin
  • This problem has not been solved. So far as a temporary solution, this error is closed with a picture. - Andrei Talanin

1 answer 1

The ipad was not reproduced, so I answer blindly. http://jsfiddle.net/ywgycw1L/7/

add a rule to an auer

 -webkit-transform: translate3d(0,0,0);

This is heavy artillery, if the result is satisfactory - you can try a little easier (for the browser and hardware)

 -webkit-transform: translate(0,0);

or even just opacity (0.99999999);

  • 2
    I thought here - if we are talking about safari under windows, there is a chip here - this is not a real safari, Apple’s project of this browser has turned off, a real safari does not fake like its windows counterpart. - Lim0ncmon
  • No, in this case, the error is also reproduced - Andrey Talanin