Transparent background issues in IE7 & IE8

[miguael]

The transparent admin-bar and the transparent navigation has a strange behavior in IE7 & IE8: It get's a transparent grading from the upper left corner, instead of the normal transparency.

As far as I get it, it happens only, when some javascript is active (when I click on a new tab in the activity per example, it gets the grading).

This is annoying because sometimes (depends on the header-image) the content get hard to read...

[apeatling]

Works for me on both IE7 and IE8.

[miguael]

REALLY STRANGE... It is just on my computer... after the ticket was closed, I checked on other computers and - it just works... sorry, to bother...

[crewez]

I have the same issue - verified on multiple computers using IE 7. When you click on a submenu item (content loaded via ajax), the menu and adminbar backgrounds shift to a gradient.

[hnla]

Just to add a comment to this issue which I too ran across.

Checking the graphic finally showed that a 1px graphic had been used, generally this can be considered a bad idea as regardless of size each graphic requires to carry all colour bit depth info, the smaller the graphic the more often the browser has to repeat that graphic across and down the screen which has an impact on a machines system resources.

A better approach especially with a solid graphic like this which has a alpha transparency level or not is to create a new graphic ~6px wide, taller than need be to cover element height (allows the element to increase in height without running out of graphic)and to then repeat the graphic across the x plane i.e repeat-x.
This is the approach I took and clears up IE issues.

[boonebgorges]

hnla - Where's that patch?? :-D

[hnla]

There you go :)

But I pity the fool using IE6

[boonebgorges]

Just to clarify - the problem with IE6 is the alpha transparency, not the difference between using a tall image with repeat-x vs a 1px image - right?

[hnla]

One could simply leave it at "the problem with IE6 is..."

Sort of bit of both really, yes IE6 simply doesn't get alpha level channels, so historically we have had to work around the issue by using - if applicable - a crude 4x4 pixel gif with alternate pixels set to transparent or employ one of the clever, if somewhat of an unnecessary burden for the page/browser, JS / .htc files to hack IE into working with PNG 24 - also we need to remember that IE7 actually had/has pretty poor support for PNG transparency.

The 1x1 pixel issue is one that never is a great idea as it could in theory cause issues for browser and/or OS resources, you don't actually save any real file size as 1 pixel or 6 if done carefully will be same size i.e there is a minimum file size regardless even if you do have a saving it's at a cost to your users experience as each image must contain all the necessary info 1px or 1000px; 1000px x 10px area needs to repeat image & bit depth 10,000 times for the 1px image a 1000px x 1px wide image only needs to repeat 10 times both files sizes should be virtually identical or at least an insignificant difference.

As for the exact nature of the issue reported here it was a while ago but I had the notion when I tested that in fact the issue was browser stress due to having to repeat that image over and over while trying to process all that bit depth info
If simply a transparency issue then in IE6 it's obvious as the channel just displays as a crude yellow mask; in IE7 transparency is handled it, iirc, just mucks up the colour profile badly so any blend to solid block colour or areas where the graphic meets other colour blocks that should be same value never quite matches

[r-a-y]

Can't duplicate this on IE7 or IE8 on testbp.org.
And we're not really supporting IE6 for bp-default.

Need proper steps to reproduce.
Dropping priority to minor.

[hnla]

Yep should have been changed to 'theme' as it's strictly bp-default's problem, support for IE6 is a non issue, I've been codding working layouts for IE6 for what feels like forever and would deal with rendering acceptable layouts in IE6 without too much of a struggle; However the 1px repeated background graphic remains a bad thing! and that graphic ought to be replaced.

[DJPaul]

Closing this ticket as r-a-y reports unable to recreate on IE7/8. I can't confirm myself, so re-open with instruction if you can.

Also, the suggestion to change the background image from 1x1 to a 1x6? pixel image should be in its own separate ticket.

[hnla]

Agreed, move the pixel graphic issue to it's own ticket.

[johnjamesjacoby]

Moving closed ticket out of Awaiting Review.