sammyhk
Forum Replies Created
-
Yes, the beta one works correctly for my case.
Please check this jsfiddle, I just create an empty 100px x 100px
<div>with red background color, then change the background image by using javascript. After that using javascript to alert it out the HTML of the<div>.
Tested in Google Chrome, it will produce the inline style with properly escaped double quote by"I think my issue is exactly the same root cause except my original background image url contains whitespace before the actual URL:
style="background-image: url( http://www.teenlok.com/wp-content/uploads/Vision-1600x500.jpg);"
It will turn the URL to which contains the whitespace:
style="background-image: url(https://cdn.shortpixel.ai/client/q_lossy,ret_img/ http://www.teenlok.com/wp-content/uploads/Vision-1600x500.jpg);"According to the CSS specification, it is explicitly specify this is a correct syntax, the original quote is below:
The format of a URI value is ‘url(‘ followed by optional white space followed by an optional single quote (‘) or double quote (“) character followed by the URI itself, followed by an optional single quote (‘) or double quote (“) character followed by optional white space followed by ‘)’. The two quote characters must be the same.
Reference: https://www.w3.org/TR/CSS2/syndata.html#uri
So I think AO should trim it before construct the new URL.
BTW, I think @kikib ‘s case is also a correct use case. Because it can use "e; to escape double quote (i.e. “) in HTML, and now the case appeared in
styleattribute, so it is just a legal syntax to escape the double quote there. That is why browser can parse and fetch the correct background image before using AO on that case. There are StackOverflow thread on this usage: https://stackoverflow.com/questions/5352947/how-to-escape-quotes-in-inline-styles
Similar: https://stackoverflow.com/questions/16493394/escape-quote-with-font-family- This reply was modified 6 years, 11 months ago by sammyhk.
This is our internal developing site (http://59.148.109.46:8080/), I set up a clear installation with only autoptimize and faith theme (https://www.ilovewp.com/documentation/faith/).
After installation, when enable “Aggregate JS-files”, just got missing </html> end tag.
Similarly, when enable “Aggregate CSS-files”, just got blank page due to incorrect HTML generated:<!DOCTYPE html> <html lang="zh-HK"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link type="text/css" media="all" href="http://59.148.109.46:8080/wp-content/cache/autoptimize/css/autoptimize_c6695eac6a129494418e73fdef797d5c.css" rel="stylesheet" /><style type="text/css" media="print">#wpadminbar{display:none}</style><style type="text/css" media="screen">html{margin-top:32px !important}* html body{margin-top:32px !important}@media screen and (max-width:782px){html{margin-top:46px !important}* html body{margin-top:46px !important}}</style><titleChecked the beta version attached, result:
1) Enabling “Aggregate JS-files” still got missing </html> end tag (so not fixed)
2) Enabling “Aggregate CSS-files” still got blank page due to incomplete/ incorrect HTML generated as mentioned in other threads.Conclusion: the beta version do not fix this issue currently.