Image Rendering ****ery
I have had a big problem when building this website. For some reason safari has a bug (or a feature) that causes some images to render in a pixel-art unfriendly manner. This occurs on no other browser, and only on some images.
WHY
As you can see here, the background and the sides of the border appear blurry instead of sharp.
˚‧º·(˃̣̣̥∩˂̣̣̥)‧º·˚
I thought it was just that the image rendering property “pixelated” didn’t get applied to the image only when i’m in safari. I decided to use inspect element in Safari to find out what properties were being applied to the image. Turns out cmd+i does NOT open inspect element in safari. IT OPENS A MAIL WINDOW FILLED WITH THE ENTIRE WEB PAGE. Who in their silly mind would want to mail someone a webpage (TдT). You have to like turn on developer options through some unholy safari expedition. I keep trying to use the shortcut on instinct, causing me to have 5 mail windows open when i’m desperately trying to figure out this annoying issue. It also opened as a separate window, which defeats the whole purpose of inspect element since you can’t see the effect of the edits you are making. After some fiddling I realised you can choose how it appears in relation to your browser. I must’ve turned it to fullscreen by accident (✖﹏✖).
Finally time to see why it doesn’t have the pixelated property.
What. All of the other pixel art has the pixelated property, and they work perfectly well. I suppose this happens when the image reaches a particular size? I thought it had something to do with the way it’s scaled. That the images sized in terms of % had this issue, but using “px” didn’t solve the issue. For hours I poured over the scriptures of stackoverflow and consulted sites such as: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Still no results. My IT consultant, coding guru and good friend Drava was able to recreate the problem and cause it to arbitrarily not occur, but alas, we are no closer to figuring out what the actual cause is.
Maybe you’re reading this in the future and it’s fixed!! In which case: