Forums
View unanswered posts | View active topics It is currently Mon Jul 28, 2014 4:19 am



Reply to topic  [ 13 posts ]  Go to page 1, 2  Next
 PIE causes duplicate downloads on files 
Author Message

Joined: Sat Aug 28, 2010 9:43 am
Posts: 2
Post PIE causes duplicate downloads on files
Bug?

If you apply CSS3 PIE to an element with a background image specified in CSS, the background image is downloaded twice, and the caching headers are ignored. Not good for larger images...


With PIE
Image


Without PIE
Image

Note that PIE is downloaded twice, even though it's set with far future expires headers, as well as backgrounds.png.

Does anyone have any suggestions on how to avoid this happening?


Sat Aug 28, 2010 9:47 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: PIE causes duplicate downloads on files
That's very intersting and to be honest a bit disturbing... :/

I checked the css3pie.com site and it too is doing the same thing... PIE.htc is requested twice and also the icons image which is used as a background. Though the latter just returns a 304 the second time around so it's not downloading the whole image twice. Perhaps your server is not checking the if-modified-since header and just always returning the full image contents?

The whole PIE.htc coming down twice is nasty though. I was curious so I checked some of the sites for other similar .htc solutions. Most of them seem to have the same problem, though iepngfix.htc only seems to download once. I'll investigate what's different about that one.


Sat Aug 28, 2010 3:07 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: PIE causes duplicate downloads on files
I should add, these duplicate requests only seem to occur on the first page view for the site. So you get 2 copies of PIE.htc when you visit the css3pie.com homepage, but then as you click through other pages on the site it uses the cached copy and doesn't make any more requests.


Sat Aug 28, 2010 3:08 pm
Profile

Joined: Sat Aug 28, 2010 9:43 am
Posts: 2
Post Re: PIE causes duplicate downloads on files
Yes, this is only on the first view, just seems weird that the backgrounds image isn't cached in the second request - it should be.

If it helps, the image is loaded one extra time, and is used on two divs, both with rounded corners provided by PIE.


Sun Aug 29, 2010 2:11 pm
Profile

Joined: Mon Jan 03, 2011 5:01 am
Posts: 2
Post Re: PIE causes duplicate downloads on files
Any solution on this??? If there's not, I think I'll need to find another library...


Mon Jan 03, 2011 5:04 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: PIE causes duplicate downloads on files
@iwiznia: are you still seeing this issue? We do force the BackgroundImageCache now which should help at least with the background images.


Mon Jan 03, 2011 11:05 am
Profile

Joined: Mon Jan 03, 2011 5:01 am
Posts: 2
Post Re: PIE causes duplicate downloads on files
Yes, I see the htc and the background image downloading twice (the element with the background image also has border radius... I don't know if this has any effect). Also, in the repeat view the image is downloaded again, so it's ignoring the cache headers.
First view:
Image
Repeat:
Image


Mon Jan 03, 2011 12:05 pm
Profile

Joined: Tue Mar 08, 2011 6:42 pm
Posts: 1
Post Re: PIE causes duplicate downloads on files
Jason, CSS3PIE rocks!! :D

Have you been able to figure out the cause of this yet? I am seeing the issue with multiple PIE requests as well and have also seen as many as 3 requests for PIE using the following markup along with a JSP page to set the content-type (like your PHP file). Also, it does appear that the requests only happen on the first page of a site.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test CSS3PIE with 40 nodes, multiple styles</title>
    <style type="text/css">   
#pagewrap {
    width: 980px;
    margin: 0 auto;
    background: #ddd;
    position: relative;
    padding: 20px;
}
.pie {
    height: 50px;
    width: 50px;
    margin: 3px 0;
    background: #999;
    border: 1px solid #333;
    _border-width: 0;                           /* IE6 */
    -webkit-border-radius:  5px 5px 5px 5px;
    -moz-border-radius:     5px 5px 5px 5px;
    border-radius:          5px 5px 5px 5px;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
    background: no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
    background: no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(/common/assets/css/PIE.jsp);  /* Relative to the HTML or JSP, not the CSS file */
}
    </style>
</head>
<body>
    <h1>Test CSS3PIE with 40 nodes, multiple styles</h1>
    <div id="pagewrap">
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
        <div class="pie"></div>
    </div>
</body>
</html>


Tue Mar 08, 2011 7:03 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: PIE causes duplicate downloads on files
@skais001: Thanks! :)

No I haven't made any progress on this. It's a problem with IE itself, you would think it would be smart enough to only download the file once but apparently it is not. I haven't found any way to prevent it from being so stupid.

If anyone has any clues, PLEASE let me know!

The best thing I can think to do is to split out most of PIE's code into a secondary file, and make the PIE.htc file a very small loader script. That way even if it is downloaded 2 or 3 times it won't be a problem because it's so tiny. This does introduce a second HTTP request for the secondary file though, so it's a tradeoff.


Tue Mar 08, 2011 10:14 pm
Profile

Joined: Sun May 29, 2011 4:02 pm
Posts: 3
Post Re: PIE causes duplicate downloads on files
I am having the same problem and found this discussion thread while searching for a solution. It isn't only IE that downloads the pie.htc file twice. All web browsers do. Other web browsers don't execute code in the file, but server log records show that all browsers download it twice.


Sun May 29, 2011 4:13 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 13 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Google [Bot] and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.