search

apache / incubator-pagespeed-mod

Apache module for rewriting web pages to reduce latency and bandwidth.
http://modpagespeed.com
Apache License 2.0
696 stars 158 forks source link

CSS conflict ONLY on Chrome browser #922

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?

1. Turn on default filters

2.  Visit www.enduringepilepsy.com on Chrome 

3. Scroll to bottom of page under New Posts

What is the expected output? What do you see instead?

This feature is supposed to show 8 images and an image responsively changes to 
a colored block with text when mouse hovers over it. Instead, its only showing 
1 large block. No images and no response. This is ONLY happening with Chrome. 
No other browser. 

What version of the product are you using (please check X-Mod-Pagespeed
header)?

On what operating system? Mac 10.9 Mavericks

Which version of Apache? 2.4.7

Which MPM? single-threaded

URL of broken page: www.enduringepilepsy.com

Original issue reported on code.google.com by enduring...@gmail.com on 2 Apr 2014 at 11:27

Attachments:

GoogleCodeExporter commented 9 years ago 
I'm seeing similar behavior on both Chrome and Safari on the Mac, also with:
 http://www.enduringepilepsy.com/?PageSpeed=on&PageSpeedFilters=core
I'm seeing the expected behavior if I visit:
 http://www.enduringepilepsy.com/?PageSpeed=off
Note that first page visit with new query params will often work as expected.  
I'll try to narrow this down and see what filter is causing trouble.

I'm curious what version of mod_pagespeed you are using, as your header isn't 
indicating a standard release.

Original comment by jmaes...@google.com on 2 Apr 2014 at 1:07

GoogleCodeExporter commented 9 years ago 
Also see my reply in the -discuss group:

This one doesn't work and it disables quite a few filters, both risky and 
"safe":
http://www.enduringepilepsy.com/test/?PageSpeedFilters=-rewrite_css,-extend_cach
e,-defer_javascript,-lazyload_images,-inline_images,-inline_css,-prioritize_crit
ical_css,-combine_css,-combine_javascript

Original comment by matterb...@google.com on 2 Apr 2014 at 1:16

GoogleCodeExporter commented 9 years ago 
Note that there's a bug 
(https://code.google.com/p/modpagespeed/issues/detail?id=923) with disabling 
rewrite_css from query parameters.

It does indeed appear that disabling rewrite_css, combine_css, and 
prioritize_critical_css resolves the problem – or at least, the following 
works, and adding any of the above three filters does not:
 http://www.enduringepilepsy.com/?PageSpeed=on&PageSpeedFilters=debug,add_head,rewrite_images,rewrite_javascript,combine_javascript

Original comment by jmaes...@google.com on 2 Apr 2014 at 2:17

GoogleCodeExporter commented 9 years ago 
1) I just installed PageSpeed service yesterday. I finally figured out where to 
change the DNS setting on my Go Daddy account and have this work, and still had 
to call for some assistance from GoDaddy. If there is something else that needs 
done, Google's instructions need to clarify this and add a LOT more details. If 
there is something that needs added to the header, please tell me and I will do 
so.

2) I worked on this for hours last night and the error only existed on Chrome. 
I used both Safari and Firefox with no problems. The only thing that made made 
the feature appear "normal was either the "preview" directly from configuring 
the rewriters OR to use 
http://www.enduringepilepsy.com/?ModPagespeed=on&ModPagespeedFilters=rewrite_css

3) If this is a bug, as you indicated, I appreciate Google addressing it. As I 
stated, I'm just trying setting up my PSS and this is the ONLY issue I ran 
into. 

Thank you!

Original comment by enduring...@gmail.com on 2 Apr 2014 at 5:15

GoogleCodeExporter commented 9 years ago 
Indeed those settings appear to work on your front page, but it doesn't work 
for the test page:

http://www.enduringepilepsy.com/test/?ModPagespeed=on&ModPagespeedFilters=rewrit
e_css

whereas this, which only enables one perfectly benign rewriter, does work:

http://www.enduringepilepsy.com/test/?ModPagespeed=on&ModPagespeedFilters=add_in
strumentation

Original comment by matterb...@google.com on 2 Apr 2014 at 5:31

GoogleCodeExporter commented 9 years ago 
Well, we still haven't figured out exactly what's going wrong with your page; 
it's quite possible that you're using JavaScript that looks up a <style> block 
by its src= property and that's causing the problem.

However, I'd suggest you visit the PageSpeed console (see 
https://developers.google.com/speed/pagespeed/service/settings) and under 
"Optimize CSS" uncheck the boxes you see there.  After saving, test your site 
again.  This ought to fix your problem based on the testing I've done; if it 
does not, we'd like to get to the bottom of it.

Note also that this is the bug tracker for mod_pagespeed rather than PageSpeed 
Service, so you're likely to see us dispensing configuration advice that isn't 
directly applicable to your situation.

Original comment by jmaes...@google.com on 2 Apr 2014 at 5:31

GoogleCodeExporter commented 9 years ago 
@matterb: How do I establish the "add_instumentation" settings? This wasn't on 
the page I saw in help listing how to view each potential issue separately.

@jmaes: I didn't know where to go, so I tried everywhere I could last night. 
After installing PSS GoDaddy won't help any further. So I'm just trying to sort 
this out. I see know that there is a difference between PSS and mod_pagespeed. 
I just want to get this to work.

Which is better -  the  add_instrumentation or shutting off optimize CSS? How 
do I proceed? Thank you!

Original comment by enduring...@gmail.com on 2 Apr 2014 at 5:55

GoogleCodeExporter commented 9 years ago 
Also - if you have any recommendations "overall" for my rewriters, after 
looking at this - I'd appreciate the input. I've been looking at each and how 
it helps; again really want to get this at its best level of performance. 

Thank you for all of your help!

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:07

GoogleCodeExporter commented 9 years ago 
Matt's setting of "add_instrumentation" effectively turns off every 
optimization, so you're better off *just* turning off css rewriting if you 
still want to take advantage of the other rewriters.

Original comment by jmaes...@google.com on 2 Apr 2014 at 6:08

GoogleCodeExporter commented 9 years ago 
add_instrumentation is a filter that is already on for your site.
Let me explain what those URLs mean ...

http://www.enduringepilepsy.com/test/?ModPagespeed=on&ModPagespeedFilters=rewrit
e_css
<---- your site's URL --------------><--- QP1 ------><------ QP2 
------------------->

[QP stands for query parameter and is how one sets options in a URL]

QP1 means "Enable PageSpeed" (FYI, PageSpeed=on works too, the Mod is optional).
QP2 means "Only enable the rewrite_css rewriter, turn everything else off".
Similary, in the last URL I entered in comment #5, the "=add_instrumentation" 
means "Only enable the add_instrumentation rewriter".

[Note that in the PSS console filters are named differently, in particular 
rewrite_css would be labeled as RewriteCss. This is just an annoying difference 
between mod_pagespeed and PSS and isn't important]

So, this full URL will rewrite the page to rewrite CSS, but nothing else will 
be changed.

Since rewrite_css breaks your test page and add_instrumentation doesn't, it is 
apparent that rewrite_css is responsible in some way for your current problem.

Accordingly, per Jan's comment #6, we are asking you to go to the PSS console 
and disable all CSS rewriters, then visit the /test/ page and see if it then 
works. You will have to refresh the page up to 2 times to be sure that it is 
working (the first visit will possibly look OK, but that's because it wasn't 
rewritten in time, so you need to refresh the page).

Original comment by matterb...@google.com on 2 Apr 2014 at 6:10

GoogleCodeExporter commented 9 years ago 
ALL CSS - including under serve resources and inline small?

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:16

GoogleCodeExporter commented 9 years ago 
Yes please.

Best to turn get to a working state, from which we can start turning things 
back on one-by-one.

Original comment by matterb...@google.com on 2 Apr 2014 at 6:20

GoogleCodeExporter commented 9 years ago 
Ok - still having problems then...

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:21

GoogleCodeExporter commented 9 years ago 
Really? http://www.enduringepilepsy.com/test/ looks fine to me now.

Original comment by matterb...@google.com on 2 Apr 2014 at 6:26

GoogleCodeExporter commented 9 years ago 
Nope - I'm confused. Is there something I need to do? Cache or another setting?

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:28

Attachments:

GoogleCodeExporter commented 9 years ago 
Curiouser and curioser.

The test page works fine for me on both my desktop at work and my laptop on 
public wifi.

It's not obvious why it doesn't work for you but some thoughts:
* Do you run mod_pagespeed on your origin server?
* What version of Chrome are you using?
* How many times did you refresh?

Original comment by matterb...@google.com on 2 Apr 2014 at 6:42

GoogleCodeExporter commented 9 years ago 
1) I don't know for sure.  I just called GoDaddy last night and got help with 
adding the redirect to my DNS. He also did something on his end. What I'm not 
sure. ???

2) Version 33.0.1750.152

3) I've refreshed several more times even sitting here since sending screen 
image to you. Probably over a dozen times now each for both my home page and 
test... Still getting same thing.

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:46

GoogleCodeExporter commented 9 years ago 
What's interesting is if I open a new tab/window, the first load is fine. But 
when I refresh, its not.

 I get a flash with one of the images from ABOVE that fills the whole white space very quickly (I tried but can't grab it) before the rest of the page loads. 

Does this help at all?

Original comment by enduring...@gmail.com on 2 Apr 2014 at 6:55

GoogleCodeExporter commented 9 years ago 
GoDaddy don't have anything to do with this problem.
I checked your origin server and it doesn't run mod_pagespeed.

I am using v34 of Chrome though I *doubt* that's relevant.
But, perhaps you could check if there is an update for it available and update 
if so?
If there is, there'll be a menu item near the 'About Chrome' item you used to 
check the version.

How are you requesting the page?
Just typing in the URL or clicking on one of the links above?
I ask because your screen shot looks like the page has been scrolled down but I 
don't see any scrollbars.
I'm sure this is nothing but I am clutching at straws here! :-)

And to confirm: your front page, and your site in general, are working OK at 
the moment, right?
But that's without the nifty panel flipping on the /test/ page, correct?

Original comment by matterb...@google.com on 2 Apr 2014 at 7:05

GoogleCodeExporter commented 9 years ago 
Re #18

Yes, "works the first time, breaks on subsequent times" is expected behavior 
when a rewriter isn't working as intended.
That's because the first view has no (or little) rewriting applied to it, 
whereas subsequent ones do.

I don't see any flash like you report.

Original comment by matterb...@google.com on 2 Apr 2014 at 7:09

GoogleCodeExporter commented 9 years ago 
1) I pulled the Version from my Chrome help page and it says its up to date 
(I'm on a Mac if that makes a difference?) 

2) Yes - typing or copy/paste URL and scrolling down. 

3) The panel works for both pages on FIRST load, meaning if I type or 
copy/paste URL, but when I refresh  - Nope.

Original comment by enduring...@gmail.com on 2 Apr 2014 at 7:10

GoogleCodeExporter commented 9 years ago 
Hmm, I wonder if it's dependent on whether you're logged in or not.

Could you log out and try again as a visitor please?
Or more easily, open a New Incognito Window (in the menu at the top right) and 
open up the test page.

Original comment by matterb...@google.com on 2 Apr 2014 at 7:11

GoogleCodeExporter commented 9 years ago 
That's absurd - the incognito window works! This is something with Wordpress 
then?

Original comment by enduring...@gmail.com on 2 Apr 2014 at 7:17

GoogleCodeExporter commented 9 years ago 
I don't know but it at least narrows it down to being a problem only when 
logged in.

Do you have a test login you can send me, or should I just create one myself?
If you have one, please email it directly to me at matterbury@google.com (DON'T 
POST IT HERE).

Also, could you also confirm that the incognito window STOPS working after you 
log to it please?

Original comment by matterb...@google.com on 2 Apr 2014 at 7:23

GoogleCodeExporter commented 9 years ago 
No test login, but you can create one and use the test page. Its where I "work 
out the kinks".
I tried turning the CSS back on and the incognito quit working so something 
definitely revolves around this. 
Anything else email me: enduringepilepsy@gmail.com

Original comment by enduring...@gmail.com on 2 Apr 2014 at 7:27

GoogleCodeExporter commented 9 years ago 
Thank you SO much for working through this with me!

Original comment by enduring...@gmail.com on 2 Apr 2014 at 7:29

GoogleCodeExporter commented 9 years ago 
You're welcome! And thanks for the source dump.

Could you go to the PSS console and disable 'Flush Resources Early' which is 
under 'Prioritize Content'?

Then, flush your PSS cache (both HTML & resources),
then load up the test page again while logged in.

If that still doesn't work, please email me the new page source, thanks!

Original comment by matterb...@google.com on 2 Apr 2014 at 8:15

GoogleCodeExporter commented 9 years ago 
And another question: how exactly are you logging in?
Are you actually logging into your WordPress admin account?

If so, that might explain the problem, since we know we don't always play 
nicely with the WP admin console.

Original comment by matterb...@google.com on 2 Apr 2014 at 8:17

GoogleCodeExporter commented 9 years ago 
1) Done. 

2) Yes. I use the login here: http://www.enduringepilepsy.com/wp-login.php

Original comment by enduring...@gmail.com on 2 Apr 2014 at 8:21

GoogleCodeExporter commented 9 years ago 
Thanks. But now I am very confused.

It seems that when logged into your WP admin, PSS is ignoring your settings 
(all the rewriters you've disabled) and using the defaults, so the page is 
breaking.

I have no why this is - the only suggestion I have is for you to go to your PSS 
console and add this URL the blacklist (under Configure Rewriters):
  http://www.enduringepilepsy.com/wp-admin/*

Other than that I have run out of ideas for now.
All I can suggest is that you preview your site in an incognito window so you 
see it as a "normal" user would.

In the meantime I'll continue trying to track down which rewriter(s) are the 
problem so that we can re-enable the others.

Original comment by matterb...@google.com on 2 Apr 2014 at 8:43

GoogleCodeExporter commented 9 years ago 
Ok - At least I know that the there isn't an issue for those that visit my 
site. Whatever the problem is and wherever it lies there is something that I 
just have to be conscious of for now.

Original comment by enduring...@gmail.com on 2 Apr 2014 at 8:46