Author Topic: Background Color "Flashing" White..?  (Read 8576 times)

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« on: November 25, 2011, 05:10:06 PM »
Hi all:

I have an edited theme for our installation of RoundCube that's working fine, except for one small thing.

The background color has been changed from default white in common.css and works fine EXCEPT for when refreshing the page, the overall background color SOMEWHERE still seems to be set WHITE, as it kind of "flashes" before redrawing the screen with our correct (dark green) background color.

Is there somewhere else besides common.css where a background color might be getting set, before it's over ruled by the common.css setting, which I need to also change to match our green?

Granted it's a minor thing but just kinda annoying, LOL.  Any ideas will be much appreciated.

-JC

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #1 on: December 03, 2011, 01:50:00 PM »
OK you guys... here's a bit more info.

I definitely think this is some CSS or HTML code that's drawing the background WHITE *before* my common.css overrides it with my GREEN background color, rather than just being the browser page-loading "white background" kinda flash at first.

As another test I loaded the page on a little netbook I have running OSX (hackintosh) with a version of Safari and THERE (but only there so far as I've seen in my testing) I can sometimes get a little white BAR at the bottom of the roundcube mail window area to stay WHITE longer, until I just *touch* the resizing bar, which then makes it redraw the screen using my GREEN color setting.

This screenshot also shows it running in an IFRAME, which further clearly shows only THAT part of the "background" color where it's drawn.

Here is a BEFORE with the white area, before resizing and the recolor:
http://www.detroitblackjackteam.com/email/WhiteFlash1.png

...and here is AFTER when the white background area was redrawn with the correct GREEN *.css from common.css (I think)
http://www.detroitblackjackteam.com/email/WhiteFlash2.png

---

So, again, C'MON you guys, I'm sure some of y'all reading this out there know more about the RC themes and WHERE this background color entry might be... but for the life of me I cannot FIND it anywhere in any of the CSS or HTML files!

50+ views on this topic and nobody knows?  ???  C'mon y'all... 'lil help, please?

-JC
« Last Edit: December 03, 2011, 01:53:44 PM by KeyJockey »

Offline rosali

  • Hero Member
  • *****
  • Posts: 2,533
Background Color "Flashing" White..?
« Reply #2 on: December 04, 2011, 02:44:07 AM »
Search for 'F6F6F6' ... it is used in mail.css and print.css as well. Also various plugins sets this background color.
Regards,
Rosali
__________________
MyRoundcube Project (commercial)

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #3 on: December 04, 2011, 03:28:26 PM »
Hi Rosali:

Thanks for the reply, but that's not it.  I tried changing all instances of F6F6F6 in both those files to FF0000 as a test and the area in question STILL remained WHITE.

There *are* a ton of instances of both FFFFFF and "FFF" format in all the RoundCube *.CSS files which (I suppose) my next step to try will be to change ALL of them to something weird (variation of red or something easily identified) BUT I was really just hoping *someone* already knew which one of these SPECIFICALLY was gonna be related to the overall roundcube window background.

Nobody else out there has any idea on this?  

-JC

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Background Color "Flashing" White..?
« Reply #4 on: December 04, 2011, 06:55:12 PM »
If you put your background in 'html' attribute in the css file anything that is overwriting the background color wont disappear when the page is fully loaded which would make it easier to track down.

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #5 on: December 05, 2011, 10:16:54 PM »
Quote from: skaero;37530
If you put your background in 'html' attribute in the css file anything that is overwriting the background color wont disappear when the page is fully loaded which would make it easier to track down.

Hi Skaero:

Aha... um, ok... wait, what?

Not sure I can parse that sentence: are you saying to add a background: CSS setting to the HTML file "inline"...?  or in HTML section of common.css?  Or something else?  Hm.

I still have not found WHERE this bit of WHITE (see screenshots) is coming from, and I only still ASSUME that the full-screen "flashing" of white when the page starts rendering is coming from the same place.

It's crazy that something so seemingly simple (setting the background color! Duh!) can't be identified and easily changed...

-JC

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #6 on: December 05, 2011, 10:18:46 PM »
Quote from: skaero;37530
If you put your background in 'html' attribute in the css file anything that is overwriting the background color wont disappear when the page is fully loaded which would make it easier to track down.


Hi Skaero:

Aha... um, ok... wait, what?

Not sure I can parse that sentence: are you saying to add a background: CSS setting to the HTML file "inline"...?  or in HTML section of common.css?  Or something else?  Hm.

I still have not found WHERE this bit of WHITE (see screenshots) is coming from, and I only still ASSUME that the full-screen "flashing" of white when the page starts rendering is coming from the same place.

It's crazy that something so seemingly simple (setting the background color! Duh!) can't be identified and easily changed...

-JC

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Background Color "Flashing" White..?
« Reply #7 on: December 06, 2011, 12:57:02 AM »
Sorry, I'll try to make it a little clearer. If you move your background to the html css attribute:
Code: [Select]

html {
background: green;
}

Then anything that has a white background will display over the your background once the page has finished loading which should make the object that is causing the white "flash" easier to find.

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #8 on: December 06, 2011, 04:57:22 PM »
Thanks for the clarification.

OK, so... I did that, I added HTML section to common.css and set background to FF0000 (bright red) as a test.

http://www.detroitblackjackteam.com/email/html-red.png

So NOW the background IS red and my first situation (noted with screen caps above) is not happening any more -- the small white "bar" area at the bottom which is redrawn when the preview pane was moved is not white any more (I think) and the background is drawn all RED now.

However, my initial "white flash" question & situation still seems to remain.  Unless it's not really something drawing the RoundCube area white at first and it's just the browser page loading normally?

Here is an animated GIF file to kind of show what I'm referring to.  As the page LOADS, the RoundCube "area" (in iFrame) of my page is rendered but it STARTS all plain blank WHITE before the rest of the RC stuff fills in (including background color).

http://www.detroitblackjackteam.com/email/simulation.gif

Any other ideas?  Am I crazy?

-JC

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Background Color "Flashing" White..?
« Reply #9 on: December 07, 2011, 02:36:07 AM »
I going to guess that its a problem with iframe, if you load RoundCube be its self does it still have the "white flash"?

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Back with further info...
« Reply #10 on: December 10, 2011, 09:51:08 PM »
OK I'm back finally with a bit more info on this.

Still trying to track it down and making little headway.

RE: the IFRAME, I changed the css code for the iframe in my 'container' html document to include:  iframe { background-color: #ffff99; }

This made the "background flash" for the IFRAME ONLY show a kind of dull yellow (ffff99) but ONLY WITH THE LOGIN PAGE for RC, strangely.

You can test that yourself on our page right now even without a login for our webmail system.

The further STRANGE thing, however, is that this YELLOW does NOT show as the "white flash" for the IFRAME any more once you're logged in -- after successful login to RoundCube, the white flash background is BACK again, same as before.

However, I don't see it when RC is running full screen, i.e. outside of my IFRAME.  So Skaero perhaps is right that it's just an iframe thing mostly... but kind of NOT too, either, since the full RC running (vs just login page) does not seem affected by the iframe background color.

Aieee.... this is such a dumb small thing but driving me batty.  Any more help, anyone?  Please comment if you have ANY ideas out there...

-JC

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #11 on: December 11, 2011, 11:42:18 AM »
Oh, sorry... wait... another update.

Just checked an email in the site (while logged in) and actually just now the dull yellow ffff99 DID "FLASH" also, but then the background drew WHITE in the iframe space as well, and THEN the compose email window drew.

So apparently there's still the iframe background from the 'container' being implemented but then it's getting over-ruled or over-written again by something ELSE that draws it WHITE, and then the RoundCube screen elements for the email window get drawn in.

Layers on layer on layers.... or something like that.  SO, *how* can I just get control of and *standardize* the darn background color? :(

-JC

P.S. EDITED: oh, wait... ok, sorry, no... my mistake maybe.  Looks like the yellow iframe background 'flashes' when I load the whole page from the site MENU, i.e. redrawing the html container of the iframe also first.  And THEN still "inside" the iframe it gets drawn WHITE as the RoundCube elements are rendered.  So, the above still stands (I think) but the "yellow" was maybe NOT triggered by any RC code after all...
« Last Edit: December 11, 2011, 11:52:24 AM by KeyJockey »

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,876
    • SKaero - Custom Roundcube development
Background Color "Flashing" White..?
« Reply #12 on: December 12, 2011, 02:47:59 AM »
It may be easier to ditch the iframe and code your top menu navigation into RoundCube, iframes have always been problematic.

Offline KeyJockey

  • Jr. Member
  • **
  • Posts: 37
Background Color "Flashing" White..?
« Reply #13 on: December 12, 2011, 12:29:23 PM »
Actually I tried that at first and couldn't figure out how to do it (i.e. embed our top menu navigation into the RC code).  I've done that in other areas of the site but RC code is a lot more inscrutable to me and I couldn't make much progress on that approach :(

Also I like having the webmail module "web app" running a bit *smaller* than full screen, via the iframe approach.  Just seems to fit it in to our site design a bit better that way.

SO... I dunno.  I guess if it's really that hard to fix this stupid white background thing I'll just learn to live with it.

Was just hoping SOMEONE who actually groks the code for RC would read this and clearly/easily see what to do to resolve it.  IF this thread goes idle and some kind person some time in the future reads it, please email the answer to me via the web form on the main page of our site (above URL).

Thanks,

-JC