Sorry, Apple fans, but I found a problem with the Safari mobile browser. Indeed, in one of my projects, I had to display an animation (a sprite for which I changed the viewport). The image size was 4 MB with a width of 9600px and height of 600px. What we noticed initially is that the image in question did not appear on the iPhone nor the iPad. It was strange, because in all other platforms it appeared perfectly. After a brief search on Google, I found that a picture that has more than 3 MB might cause display problems on the iPhone and iPad. So, we changed the format of the image for the JPEG format in order to reduce its size. This has partially solved our problem. Indeed, the image was displayed on the screen, but it was resized. After another search, I discovered that the Safari browser was the cause. When an image is too large, the browser just resizes it. Also, I found that there is no way to deactivate this function. 🙁 It smells like: “If you can’t fix it, feature it.” But still, we’ve found a solution to our problem. We removed the <img> tag to replace it with a div. Then, we simply applied to the div a CSS that contained the image to animate. Since the browser never resizes a div, we fixed our problem this way. Note that I do not want to put the blame entirely on Apple. The real problem, in my opinion, is that the application was not designed for mobile apps. Another site should have been created for mobile devices or else a responsive website should have been developed.

gabriel bélanger

Previous post

Pyxis partenaire de l'Agilité

Next post

A developer is more than a coder...