I’m not into WP, but I understand people get around this by creating a “child theme”. I’m sure someone more WP proficient could help you with that.
Hi Sam, yes I created a child theme. That is where i modify the css so I dont’ have to change the parent theme css every time there is an update. Im just not sure how to “turn off” the image-rendering: optimizeQuality completely because I would have to delete it from the parent theme css and delete it every time the theme has an update.
I’m guessing that the body {} selector does not carry enough specificity weight to override the existing rule. I’ll need to look at the css.
I can override the existing rule for the body selector, thats how I fixed the problem in FF. Im just not sure how to turn off image-rendering completely without removing the code. The following didn’t work, maybe there is something else.
body { image-rendering: none; }
I found this:-
body {
/* enhance Safari image rendering */
image-rendering: auto!important;
}
in themify-customizer.css
Edit: Is that you fixing it?
Yes, that is what I have been modifying in the child theme.
This property is a new one on me, so not familiar with its workings, but looking at caniuse.com I think you may need some prefixes, -ms-, -moz- and -webkit-.
Though if it does need them, then why does it need to be overridden? 
Im not sure. I didnt need a prefix to work in firefox. Based on this, I tried
-ms-interpolation-mode: nearest-neighbor;
But it didnt work for IE/Edge, though that link does say its not supported after IE9. I guees ill keep looking.
I’m thinking that those settings are meant to enable the pixelated look. So maybe try -ms-interpolation-mode: none or auto.
I need to read up on this one.
That is a good though, I gave it a shot but didnt work. Ill keep looking.
Well as everyone suggested, the problem was due to image downscaling. I uploaded one of the images to size and its fixed, But now on my tablet the image is a little fuzzy. I guess ill have to write some php to swap out the image for higher pixel ratio mobile devices. Thanks everyone for the help!
I want to go out on a limb for a few minutes and consider and test the practicality of making an unpopular choice.
I have not tried to read all of your stylesheets or HTML, so if my questions seem ignorant, it’s because they are.
First, a quickie. Is your custom stylesheet (Child Theme or whatever it’s called in WordPressEze) the last stylesheet in the cascade? or are there any WPTheme stylesheets below it? Your local/custom/child-theme stylesheet MUST be the last stylesheet in the cascade for overrides to work as expected. Could you check on that, please?
Now the hard one. What is being accomplished by using the “image-rendering” property? If it is commented out in the WordPress master theme file, what changes on the pages? I am assuming there are no other options being used anywhere except “optimizeQuality”. If that is not true, please say so.
If nothing changes when {image-rendering:optimizeQuality} is commented out, then I am inclined to recommend leaving it commented out (and commenting out {image-rendering:auto;} as well) and lets review the scaling of the small circles again.
The property is simply too new and poorly supported to be used in a live site right now and it seems to be causing a bigger problem than it is supposed to help solve.
Image downscaling shouldn’t be a problem. It’s done all the time. ALL THE TIME!
This topic may be useful in improving image crispness:
The child theme is the second in the cascade, the first being the parent css. So yes it can override the parent css. Fullpane is the parent css:
With regard to commenting out {image-rendering:optimizeQuality} im not sure how to do that. I would have to make the change in the parent theme which I can, but every time there is an update to my parent theme issued by the company I purchased the theme, I would have to go in each time and change it back.
Ill see if can find some ideas in that thread thanks!
1 Like
There seems to be 8 stylesheets below the child theme stylesheet, so it isn’t the last stylesheet in the cascade, which in turn means that you cannot override any of the stylesheets below it without using “heavy” measures. Maybe if someone else explains the difference between second and last it will be more meaningful.
That is why I said it would be an unpopular choice. Have you tested the question or just ruled it out without testing? My argument has already been stated. The defense for the argument is that commenting out that line of CSS after each update (I have no experience with the frequency of WP or themeify updates) is a small price to pay to get by until the property is properly supported without jumping through “workaround” hoops to try to overcome an immature property. How long will it take for it to mature? Dunno. But we’re juping ahead… remember that I suggested that the possibility be tested. If commenting the property out causes more problems than it fixes, then it’s a bad choice.
I completely agree with your assertion of choosing the path that satisfies the most conditions at this point until a better solution is available. I think I will load the images to size and avoid resizing with html. Though this affects a little quality on high res tablets, most of my visitors come from desktops.Thanks for all of your perspectives!
What are you using to inspect the code. I find ‘inspect element’ on FF to be really useful as you can see all of the styles that are being applied and where they are generated from, or indeed overridden. This should at least tell you if the style in the sub theme is taking precedence over the main sheet etc or if there is something else in another sheet that is overriding it.
hth
1 Like
If the images are exactly to size (110px) they won’t be that sharp on double density displays. The optimum size would be double actual size, 220px. Not sure if it’s worth trying, but maybe using that size would help. Scaling images to the power of 2 usually gives better results than some random factor. Though I’m not convinced that is the problem here.
I think it’s more ((
)) whoever thought it was a good idea to put this property into the theme.
This is what I would be doing (have done myself).
Any icons like this that I may have used png for in the past, I have replaced with SVGs. They are perfect for this, they look good at any size/resolution and extremely lightweight.
Though to be honest I have no idea how they react to this problem css property.
2 Likes
Im going to see if I can figure out how to remove that property as you have suggested, Its just not playing nice. SVGs are an interesting option, maybe ill play around with those to see how it works.