Skip to:

Opened 14 years ago

Closed 13 years ago

Last modified 8 years ago

#1749 closed defect (bug) (no action required)

Transparent background issues in IE7 & IE8

Reported by: miguael's profile miguael Owned by:
Milestone: 1.2.8 Priority: major
Severity: normal Version:
Component: Templates Keywords:


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...

Attachments (2)

gradient-bg.JPG (41.9 KB) - added by crewez 14 years ago.
60pc_black_better_version_repeat-x_do_not_use_for_ie6.png (2.7 KB) - added by hnla 13 years ago.

Download all attachments as: .zip

Change History (18)

#1 @apeatling
14 years ago

  • Resolution set to worksforme
  • Status changed from new to closed

Works for me on both IE7 and IE8.

#2 @miguael
14 years ago

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...

14 years ago

#3 @crewez
14 years ago

  • Keywords transparency added; transparenca removed
  • Resolution worksforme deleted
  • Status changed from closed to reopened

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.

#4 @apeatling
14 years ago

  • Component set to Activity
  • Milestone changed from 1.2 to 1.3

#5 @hnla
14 years ago

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.

#6 @boonebgorges
13 years ago

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

#7 @hnla
13 years ago

There you go :)

But I pity the fool using IE6

#8 @boonebgorges
13 years ago

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?

#9 @hnla
13 years ago

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

#10 @r-a-y
13 years ago

  • Component changed from Activity to Theme
  • Keywords 2nd-opinion close added; transparency admin-bar navigation css removed

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

Need proper steps to reproduce.
Dropping priority to minor.

#11 @hnla
13 years ago

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.

#12 @DJPaul
13 years ago

  • Milestone changed from 1.3 to 1.4
  • Resolution set to invalid
  • Status changed from reopened to closed

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.

#13 @hnla
13 years ago

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

#14 @DJPaul
13 years ago

  • Milestone changed from 1.4 to Awaiting Review

#15 @johnjamesjacoby
13 years ago

  • Keywords 2nd-opinion close removed
  • Milestone changed from Awaiting Review to 1.2.8
  • Severity set to normal

Moving closed ticket out of Awaiting Review.

#16 @DJPaul
8 years ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.