Fragmentos sobrepostos uns aos outros

Eu tenho uma barra de ação com 3 guias, cada guia abre um fragmento. A terceira aba, "Catálogo", tem uma lista:

Quando clico em um item, ele abre outro fragmento, que não faz parte da barra de ação:

public void onClick(View v) {
    switch (v.getId())
    {
    case R.id.category1:    
        Fragment cosmeticsFragment = new ActivityCosmetics();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();

        transaction.replace(android.R.id.content, cosmeticsFragment);
        transaction.addToBackStack(null);

        transaction.setTransition(1);

        transaction.commit();
        break;
        ...

Isto é o que parece depois disso:

A partir desse ponto, se eu for para outra guia e, em seguida, retornar à guia Catálogo, vejo os dois fragmentos anteriores sobrepostos uns aos outros:

Como evito que isso aconteça?

questionAnswers(3)

yourAnswerToTheQuestion