WordPress.org

Ready to get started?Download WordPress

Forums

Autoptimize
[resolved] Home page corrupted (21 posts)

  1. fotofashion
    Member
    Posted 1 year ago #

    Apparently works for all of my pages, except for the home page. With CSS optimization the contents of my home page (image and text box) are shifted about 240px to the right, leaving behind a black bar at the left.

    http://wordpress.org/extend/plugins/autoptimize/

  2. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    some questions to start off with;
    = what theme are you using?
    = did you also have this issue with the previous version of autoptimize, or are you a new user?
    = does the problem persist if you check the option to only search for CSS in the head?
    = can you provide me with the URL of your site, so I can have a look at the CSS?

    kind regards,
    frank

  3. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    forgot one question; what browser did you observe the CSS breakage in?

  4. fotofashion
    Member
    Posted 1 year ago #

    Thanks for the quick reply! I am really happy that Autoptimize support is secured for the future.

    - I am using the theme "Slash" from Dream-Theme (http://themeforest.net/item/slash-wp/701905)
    - Version 1.4 worked okay for me and I now reverted back to this version.
    - I have to admit that I did not try that.
    - http://fotoandfashion.de/
    - I checked it in Safari, Chrome and Firefox. The result in all three browsers is identical.

    What might help: I noticed that the home page looks okay as long as I am logged in as admin. The problem only occurs when I am logged out from the WP backend.

    Thanks for your help!
    Andreas

    P.S. It's past midnight over here. I will try the "serach for CSS in only the head" tomorrow.

  5. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    We're in the same timezone (I'm in Belgium), so ping me here when you're going to re-enable 1.5 so I can check what is going on in the CSS (or even javascript)?

  6. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    I see I introduced a small bug in /wp-content/plugins/autoptimize/classes/autoptimizeStyles.php in the getcontent-function which just might be the reason for the regression (although I would be surprised).

    Line 326 now reads:
    $this-> nt = '';

    but should instead be
    $this->restofcontent = '';

    Can you change this when re-applying 1.5? There were some other small changes in autoptimizeStyles.php, most of which were for convering background-images to data-URI's, but I suppose you're not using those?
    If the problem persists, I'd like to compare the CSS at that point with the 1.4-one I have in a browser tab now.

    I also took a look at your site, comparing HTML & CSS for HP versus other pages (which aren't broken, correct?). I suspect the problem is related to the fact that the CSS for #holder is defined 2 times on the HP, once for the generic #holder and once for the HP specifically. The HP-specific CSS for the holder-div resets the padding from the default "14px 0 63px 287px;" to "0 !important" and if that reset is not honored, the main div indeed moves 287 pixels right.

    It would make sense for the CSS that is specific for #holder div on the HP, to be defined as "#holder.static" or "#holder.h" (the static- and h-classes are added to the holder-div in the HP HTML but not on other pages) instead of just "#holder"? This small change might (but then again might not) solve the problem with the newer version of Autoptimize.

    Hope this helps! :-)

  7. fotofashion
    Member
    Posted 1 year ago #

    Hi Frank,

    my site is now online, using v1.5. I have applied the change to autoptimizeStyles.php and also tried to search for CSS in only the head, but the problem persists.

    Hope the CSS will tell you something. ;) Please let me know when I can revert back to v1.4.

    Thanks a lot for your support!
    Andreas

  8. fotofashion
    Member
    Posted 1 year ago #

    Forgot to mention that the layout is responsive to the screen size. Try and change the with of your browser window and you'll see what I mean. At a smaller screen size the menu is replaced by a mobile version and the text box moves from right to left. At an even smaller screen size the mobile menu is getting smaller an the box disappears.

    The latter one works fine, but the other two views have offset issues. And yes, v1.5 works fine for all other pages and I am not using URIs for images.

  9. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    Can you for testing purposes in autoptimizeStyles.php on line 323 change title (back) into head;

    $this->content = str_replace('</title>','</title><link type="text/css" media="'.$media.'" href="'.$url.'" rel="stylesheet" />',$this->content);

    to see if that solves the problem? this -at first sight- seems the only change that might cause the regression. feel free to roll back to 1.4 if it does not work after that (i'll dive into the CSS which I have in a tab) later tonight/ tomorrow).

  10. fotofashion
    Member
    Posted 1 year ago #

    Two replacements, right? I did that, but with no success. So I'll roll back to 1.4 for the moment.

    Man, that's almost real time. I never experienced such a swift response before. Cool!

  11. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    If you still haven't rolled back, I'll post some other small changes in a minute to do "near real time" bugfixing :-)

  12. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    1. line 323 change should be:
    $this->content = str_replace('</head>','<link type="text/css" media="'.$media.'" href="'.$url.'" rel="stylesheet" /></head>',$this->content);

    2. if that doesn't help, change that back into:
    $this->content = str_replace('</title>','</title><link type="text/css" media="'.$media.'" href="'.$url.'" rel="stylesheet" />',$this->content);

    and put line 286 in comments, uncommenting the same code on line 299.

    3. if that does not help, put 299 back in comments and uncomment 286 and go to line 310;

    $this->content = preg_replace('#%%IEHACK%%(.*)%%IEHACK%%#Usie','stripslashes(base64_decode("$1"))',$this->content);

    and change it into
    $this->content = preg_replace('#%%IEHACK%%(.*)%%IEHACK%%#Usie','base64_decode("$1")',$this->content);

    If that does not help either the problem is not in autoptimizeStyles.php (meaning I'll just have to dig deeper).

  13. fotofashion
    Member
    Posted 1 year ago #

    Yippee! :)

    The first advise fixed it. I apparently did a mistake when editing line 323. Now I pasted in the code you suggested and it works.

    A very BIG thank you!

  14. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    very happy it works that way!

    I made that change because of issue with the Twenty Twelve theme, but in that case I'll just have to look for another solution.

    Greetings from neighboring Belgium,
    frank

  15. fotofashion
    Member
    Posted 1 year ago #

    Marked as "works" :)

  16. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    danke!

  17. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    not happy with just reverting line 323 back to the 1.4 version, I did some more comparisons between the two tabs with your site, one with AO 1.4 and one with 1.5 and I think I found the root cause:

    • in AO 1.5 the CSS was added in reversed order (so CSS 2 would get loaded before CSS 1)
    • the CSS for #aside (and other id's) was in two CSS-files (one for media=screen and one for media=all
    • because of the inversion of CSS, the position of #aside was set as 'relative' when using AO 1.5 but was correctly overridden as 'absolute' in 1.4
    • this only impacted the HP, because there the #aside is not inside #holder, which is the case for the other pages

    A workaround-solution would be to mark 'position:absolute !important' for #aside in the HP-specific CSS.

    To solve the reversed order problem in Autoptimize 1.5, without reverting to the version 1.4 replacer-thingie on line 323, could be to replace our current workaround:

    $this->content = str_replace('</head>','<link type="text/css" media="'.$media.'" href="'.$url.'" rel="stylesheet" /></head>',$this->content);

    with:
    $this->content = str_replace('<title>','<link type="text/css" media="'.$media.'" href="'.$url.'" rel="stylesheet" /><title>',$this->content);

    Hope you have time to test this, if this works I might push out version 1.5.1 in the near future.

  18. fotofashion
    Member
    Posted 1 year ago #

    Sorry for the late reply. And yes, that works as well. Looks like 1.5.1 is just around the corner. ;)

  19. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    super! :-)

  20. futtta
    Member
    Plugin Author

    Posted 1 year ago #

    I just pushed out 1.5.1 which has the CSS order bug fixed, would be happy if you could test & confirm if the problem is solved.

  21. fotofashion
    Member
    Posted 1 year ago #

    Yes, works flawless. Thank you for the update!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.