wildmice

Hi Frank ~

Well that’s something i wouldn’t have thought about – that it may be working anyway despite the CSS looking mangled. Since my stylesheets do begin with @charset “utf-8”; on the first line, that makes some sense.

I will check and see if maybe it’s working fine. But first i have to resolve two other issues with Autoptimize actually breaking things. One was already posted here at :

https://www.ads-software.com/support/topic/conflict-with-fancybox?replies=7

Thanks Frank ??

Glad to hear that because i am kean to use this plugin in production if i can resolve the 3 issues i have experienced. If/when it looks like you are making progress on the UTF8 problem or this one, then i will dig into why it is also breaking a small back to top button and see if i can narrow down whether it’s the JS or the CSS that it’s breaking. More later on that one, which i haven’t posted yet.

I am saving my 99% page speed screenshot, hoping i can put Autoptimize back on client sites and have that rating again ??

Ok, i’m back. I’ve reproduced the problem on a fresh WP install with no other plugins. Here is what i did :

1. Install WordPress
2. Activate the theme nelson-base (you have a link to this for the UTF-8 problem)
3. Add a gallery to any post.
4. Change [gallery ...] to [flexgallery …] (this is a shortcode that comes with the nelson-base theme)
5. Visit the page and click on a gallery thumbnail. The full size lightbox image should have an “x” closer graphic at top right.
6. Now activate the autoptimize plugin and check just the css optimize box.
7. Try the gallery again. You should see that the “x” closer is now broken. Specifically, the sprite background image used for the graphic is shifted. However, if you look at the compressed css, it still appears to be good.

Hi Frank,

I tried excluding both the CSS and JS, but it makes no difference.

Let me see if i can reproduce the problem on a fresh install of WordPress.

I’ll be back after i’ve tried that.

Hi Frank. Here is a link to the theme :

https://wildmice.ca/nelson-base.zip

and the CSS file from my local test :

https://wildmice.ca/autoptimize_5aed7fb9d9fbcb5a619743cd06a9fd62.css

I believe the default font will have Chinese fonts in the list. If not, go into theme options > fonts and select “Chinese”. The broken fonts are near the top of the CSS file, before Font Awesome, starting around character 1000.

Makes no difference. The Chinese characters are still corrupted. And yes, i did save/clear cache before checking again ??

After a closer look at the back-to-top button problem, it appears that this one is caused by the javascript optimization and is not affected by the css options.

If by any chance you are using Plesk, the culprit may be nginx, which is set up as a front-end to Apache. We have removed nginx from all our Plesk sites because it commonly serves partial images and then caches them. Not nice.

Lol, that is where i get off the big G’s bandwagon. I am building sites for *all* devices, not just mobile. On some screens *all* the content is above the fold, on phones hardly any. “Above the fold” is a futile exercise IMO.

Thanks AJ. The noptimize is what i ended up using.

The more i use this plugin the more i’m impressed. At the outset i wasn’t expecting such depth of detail so didn’t even look for some of these features.

What really kind of blew me away was when i tried the option to defer CSS loading – loading it via Javascript – and despite the complexity of the page it actually worked (aside from the flash of unstyled content).

Thanks for your reply Frank. Enjoy your vacation ??

The first line of my css file is this :

@charset “utf-8”;

Here is an example of something that breaks due to not being UTF-8 encoded.

font: 100%/1.43 “Helvetica Neue”, Helvetica, Tahoma, “DejaVu Sans”, “微軟正黑體”, “Microsoft JhengHei”, “华文细黑”, STXihei, “宋体”, SimSun, “新宋体”, NSimSun, PMingLiU, “Arial Unicode MS”, sans-serif;

@kylereicks ~ Thanks for going through that. I will watch for the next version.

I don’t think it’s reasonable for anyone to expect that this plugin will do its magic on a multi-column page, because everything is based on viewport breakpoints, not the width of the column. To make this work for multi-column you would need to set breakpoints manually for the specific page template layout. I know this is very picky because i am already doing it with the original picturefill.js. But since the plugin will accept manual breakpoint settings (as you say) then that becomes a task for the user, if it’s important enough to tweak like that. This is certainly my case and may be for others.

Using this plugin on floated images may be challenging because, as any WP theme developer may tell you, getting floated images to work well responsively with captions can be very picky. I would shy away from messing with that once you i it working in CSS. But, as you say, it can be done.

The manual enqueuing is something i did not realize was involved and may actually account for why i was not seeing anything in certain situations. How this could be browser dependent though i cannot imagine. I will have to check again with this in mind.

I have also been following Scott’s original Picturefill.js suggestion that the script can be run at the end of the page just in case it does not get run before that – but it does not seem to make any difference.

So i still don’t have much that’s solid about it not working in IE11 and (some) mobile browsers. I will let you know if i discover any clues other than the obvious (i.e. no images show).

Thanks for your patience and persistence on this. It’s still a cool plugin ??

– shanna

Thanks Kyle. Let me try then to summarize what i encountered.

Everything was fine in Firefox (a fairly recent version), and it was only when i did speed tests of the site on webpagetest.org and https://mobitest.akamai.com/ that i realized no images were showing in IE11 or iPad/iPhone. IE11 on my computer was not showing them either. However they were showing on gtmetrix.com (where you cannot specify the browser, so who knows).

When this was happening i was using your version of picturefill.js for my own picturefill use too. Earlier i had used the original one, and having two different versions made my images disappear when your plugin did it’s substitution. I fixed that with your ignore attribute. I then switched to using your version for everything in order to get width and height. Then everything seemed fine, but later i noticed that it was only good in Firefox. Hope you can make sense of this.

The only thing unusual i am doing is using picturefill myself in addition to your plugin (so two separate copies of your picturefill.js) – and i think this is very likely where the problem lies – so not likely a concern for most people.

I certainly appreciate the limitations of using picturefill in a multi-column page. As you say, viewport is not what’s relevant in that case, but it’s all we have. I ended up setting up a configuration array for different page layouts, from which i select the breakpoints dynamically.

My use was limited to things outside the editable area – masthead, sliders, lightboxes, feature images. Your plugin deals with content in the editable area – the part that i did not have a solution for.

Unfortunately i am in the middle of something for a few days so cannot recreate this right now for you to test – but i could do that later if you still need me to.

Shanna

While i like your plugin a lot, there seem to be a few issues that would need resolving before i could use it.

The clash of scripts can be sorted out i think by my simply using yours for both purposes, however yours currently does not seem to work in a few browsers.

Since i am already using picturefill.js myself for masthead image, slideshows, lightboxes, and features images, this only leaves full-width images in the editable areas. It seems that your plugin does not really know what to do when an image is left or right floated and not the full width.

The other observation i have is that i am using a 2 column theme, and you are measuring the viewport rather than the column width. I understand that you really could not do otherwise, but it makes the resizing not very effective in this scenario.

I really wonder how a picture tag is going to deal with all of these things. Sounds like they’ll have fun figuring it all out.

As i mentioned earlier, i switched to using your version of picturefill.js on my own responsive images and everything seemed fine (except the enqueue problem mentioned above).

However, i was doing some speed tests tonight and discovered that your version of the script does not work for IE11, iPad or iPhone. When i switched back to Scott’s original version they all started working again.

Meanwhile on a recent version of Firefox it worked just fine with either version of picturefill.js.