Safari not scailng image properly

Question

I have found lots of similar issues on stackoverflow but none really replicating what I have to deal with. I am hosting a website on Azure and I found this strange thing. When I display it on Safari (either on iPhone or Mac) it scales improperly. If I do it on Chrome, it is all good. What is the possible mistake?

Safari View

Normal/Chrome View

Here is the code for the image itself (it is image separator between blocks which contai text:

  <div className="row bg-img-1-top">
       <img className="bg-img-limit" src={Img1top}></img>
  </div>

Where:

.bg-img-limit{
  max-width: 100% !important;
}

.bg-img-1-top{
  max-width: 100%;
}

Img1top is a normal png image, looking like the one on Chrome.

What could be the reason?

Thank you in advance!

Answer 1

The problem lies in how safari processes the images. The issue has been solved after wrapping the tag in

<div className="row bg-img-1-top">
 <figure>
   <img className="bg-img-limit" src={Img1top}></img>
 </figure>
</div>

This solved the issue of scaling.