Marquee Mystery

Question

Whilst playing with marquees i've come across the following strange behaviour;

Example A

• http://jsfiddle.net/swafe/

  <marquee behavior="alternate" direction="down" width="100%" height="200px"     behavior="alternate" style="border: none; font-size:200px;">
      <marquee behavior="alternate">
          This text will bounce
      </marquee>
  </marquee>
  

Example B

• http://jsfiddle.net/5JQMk/

  <marquee behavior="alternate" direction="down" width="100%" height="300px" behavior="alternate" style="border: none; font-size:200px;">
      <marquee behavior="alternate">
          This text will bounce
      </marquee>
  </marquee>
  

---

Question

Why is that in Example A the text moves in every direction whereas in Example B, all i have changed was the height of the element and the text no longer moves up and down and only moves on the x axis?

---

DISCLAIMER

• I have no intention of ever using marquee for anything worth anything ever.

Answer 1

It seems that the text will not alternate direction within the marquee if the font-size is around 28.7% smaller than the height of the marquee.

I only tested it with this example: http://jsfiddle.net/5JQMk/5/

To reiterate, and this is still not that precise, if the font-size is 71.2875% of the height of the marquee, it will not alternate direction, but instead move left to right.

[ Container ] - [ Font Size ] - [ Percent of container ]

200 - 143 - 71.50%

300 - 213 - 71.00%

400 - 285 - 71.25%

500 - 357 - 71.40%

Average percent = 71.2875%

Rounded perfect = 71.3%

Why does this happen? I do not know. @James Montagne has an interesting idea as to why.

But the marquee is dumb, very dumb, so dumb that even W3C says you shouldn't use it. I'm curious to know why you were testing it so thoroughly...

Answer 2

EDIT: This appears to be a "bug?" in Chrome. Works in IE as you would expect.

For whatever reason, the combination of behavior="alternate" and direction="down" only moves when the height of the content is taller than the height of the marquee:

Content fits exactly (no vertical movement):

http://jsfiddle.net/5JQMk/3/

Content is 1px larger:

http://jsfiddle.net/5JQMk/4/

But really... don't use marquee...