-3

Does anyone know what could cause Firefox to flash the screen? It turns black for a short period of time. I think it's a "reflow" but I can't figure out what's causing it.

I tried disabled transitions, custom fonts, gradients, but it still happens.

Could it be flex boxes? Because I'm using them everywhere, and I noticed some lagging in FF after I switched to flex boxes.

halfer
  • 19,824
  • 17
  • 99
  • 186
Alex
  • 66,732
  • 177
  • 439
  • 641
  • 5
    We're going to need more to go on, can you make an [MCVE](https://stackoverflow.com/help/mcve)? – Alexander O'Mara Feb 07 '15 at 15:51
  • 1
    I replaced the flex boxes with floats and everything is smooth now. So it seems that firefox sucks when you have 20-30 nested flexboxes on the page, with flex-wrap :( – Alex Feb 08 '15 at 19:58
  • 1
    http://css-tricks.com/does-flexbox-have-a-performance-problem/ – deebs Feb 09 '15 at 19:28
  • 1
    have you looked through some of the flexbugs? https://github.com/philipwalton/flexbugs – jbutler483 Feb 11 '15 at 10:27
  • 3
    @deebs The slowdown reported by css tricks is caused by using old `display:box` not the new `display:flex`, which is reported to be on par with traditional float / block / table layout. – Sheepy Feb 11 '15 at 10:45
  • Have you tried disabling hardware acceleration? In options > advanced. – Sheepy Feb 11 '15 at 10:49
  • 1
    Why offer a bounty on a question that doesn't even give an example of a page showing this behaviour? If it has a clear example then maybe other people could benefit from it, but as it stands now sounds like you're just taking potshots in the dark hoping to hit something. – Brandin Feb 13 '15 at 17:56
  • I tried making an example on jsfiddle but I cant reproduce it. It seems to happen only on pages that have lots of stuff in them. I cant just move my website to jsfiddle, sorry. The black screen and slowdowns appear when changes are made in the html with javascript – Alex Feb 14 '15 at 13:32
  • 7
    Is your website live somewhere that you can link us to? – Alexander O'Mara Feb 14 '15 at 15:28
  • 1
    look at the web inspector and see what element is flashing and why it's flashing i.e. is firefox changing the background color from #fff to #000? – www139 Feb 20 '15 at 15:00
  • do you have a huge jQuery UI file? –  Feb 21 '15 at 02:46
  • @Alex www139 is right. Take a look at the web inspector made available through Firefox to look at the page's behavior. I read an article (interestingly enough) the other day that said web development should never be done without the inspector open. Here's a link to a tutorial https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector – Thomas Feb 21 '15 at 12:43
  • Can you please clarify the deficiencies you find with the existing answers? – Alexander O'Mara Feb 21 '15 at 19:01

5 Answers5

6

I've had this same problem in the past. If you have lots of elements with display: flex nested inside each other it essentially doubles the rendering time.

A solution that worked for me was using display:-moz-box instead of display: flex

Alternatively I'd recommend restructuring your HTML to reduce the level of nesting and make you markup as lean as possible

You can find out more information in this bug report

Pattle
  • 5,983
  • 8
  • 33
  • 56
  • 8
    "using display:-moz-box instead of display: flex" Ouch. Talk about a serious regression. – BoltClock Feb 13 '15 at 16:56
  • 2
    Awesome. Your answer got my vote because of three things: an immediate solution (the CSS); a larger potential optimization fix ("de-nesting"); and a link to some documentation about the same issue. – Thomas Feb 21 '15 at 12:47
2

Try this:-

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly      works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

Change the .container with the selector for which your are applying flex property.

Akshat
  • 479
  • 4
  • 9
1

Not sure if you are facing this same issue, but I've found that browsers will render commented out CSS in the stylesheet, then disabled it. I have a page that has a class with a commented out background-image, and it will load that image, flash it, then disable the CSS. Check in your styles for commented black background color possibly.

JLane
  • 504
  • 2
  • 11
  • I use Chrome 40.0.2214.111 – JLane Feb 20 '15 at 20:24
  • Just to help others on this issue, it is MUCH more prevalent when the page loads slower. It is not disabled until the document is rendered and ready. – JLane Feb 23 '15 at 19:40
0

have you tried turning off hardware acceleration in your general settings?

could be a conflict with your video card.

The credible source being that flex boxes explicity take advantage of hardware acceleration to function.

Justin Tokarchuk
  • 159
  • 12
0

Option -> Advanced ->General -> turning off hardware acceleration -> ok

enter image description here

Vineet Choudhary
  • 7,433
  • 4
  • 45
  • 72