Why do my bootstrap labels and badges disappear on my samsung s3

Question

My bootstrap labels and badges disappear off the webpage when the page loads for the first time, using my samsung galaxy s3 they only reappear after when I refresh the browser window. Why is this happening and how can I simply force them to appear the first time the page loads please. My labels and badges are not empty, so the display none function has nothing to do with it.

An example of the code as it is that does not display the first time the page loads is:

    <span class="badge badge-important">info</span>

also tried to remove below with no luck

    .label:empty,
    .badge:empty { display: none; }

The normal boostrap.css is attached to my page and its the only style sheet that has the label selector in it.

Has anyone come across this weird sort of thing?

Thanks

Answer 1

Okay, had this problem on a Samsung Galaxy Note tablet, an LG Optimus phone, and an LG Nexus phone. When I removed the below code from the bootstrap CSS file completely, the problem went away.

Remove:

.label:empty,
.badge:empty { display: none; }

Looks like the Samsung/LG browser ignores the :empty and just makes the .label and .badge display:none whether it's empty or not.

I know that the original questioner said that he tried this and it didn't work (cache issue maybe???), but it did work for me, so I thought I'd at least post the answer since this was the #1 google result when I ran into the problem.