This is the image for viewing the mug:
The preview shows that it contains another div, but reduced by 0.2. To simulate the curved surface of the circle, I used a technique in which preview blocks have a width = original width * 0.2, and they are scaled using scaleX transforms scaleX 0.6, 0.8, 1, 0.8. 0.6.
It works fine (I can’t use the html5 canvas due to crossbrowser compatibility, this is a requirement), but, as you can see in the attached image (the upper image is from chrome, below the safari), the safari displays unwanted light lines, Nothing helps - absolute positioning, placing one block on another to hide this light line. This applies to safari, probably because after transformX block protrusions are smoothed, and because of scaleX side protrusions become brighter. Other browsers do not.
Does anyone have an idea how I can fix this for rendering without these lines in safari?
source share