Grow your CSS skills. Land your dream job.

32766

Published by Chris Coyier

Update December 2011: This bug is fixed in Opera 11.60

This is a bit of an interesting number. Google turns up a number of bug-related threads. The reason it came up for me, is that I get a lot of emails like this:

The AnythingSlider doesn't work in Opera!!!

They were right... but it seemed to be a fairly new issue and I never could figure out why. It turns out it all comes back to 32766.

I used to get emails from people who were using the AnythingSlider and added like 80 slides to it and it didn't work anymore. The reason was always that the inside <ul> element that wrapped all the slides was too narrow to fit their 80 slides. It was set at a fixed width of 9999px. The right answer would have been to make the wrapper the width of one slide multiplied by the number of them (via the JavaScript). But just in being lazy, I just added another "9" to the width making the wrapper 99999px. This was the change the borked Opera.

Apparently, Opera can't handle widths greater than 32766px. There is a thread in Opera's forums which means I'm not alone here.

Reader Erdei Csaba clued me in:

32766px ... is the highest signed 16-bit number (32767) - 1.

Opera must store these values as signed 16-bit numbers. And apparently higher positive values (> 32767) are processed as negative values. The CSS1 spec explicitly forbade negative width values, but the newer specs don't really say anything about it. They probably assume they didn't have to say anything, because it's obviously pretty ridiculous to have a negative width.

Long story short: the maximum width of an element in Opera is 32766px, and that probably should be fixed.

Comments

  1. Permalink to comment#

    I don’t know what’s weirder, the fact that people can make sliders with 80 slides or the fact that they actually bother to accomodate it to make 2% of their visitors happy (when I for sure would be asleep around slide number 30..)

    • I agree man……80 slides…..ah is that a movie ? you’re a lasting man 30 go to sleep….I one would crash at 10.
      Anyway GRATE JOB Chris i’m using AnythingSlider it’s awesome

    • Just because you can’t think of a reason why you would have 80 slides or would need surpass such a width, doesn’t mean other’s haven’t.

      Something like a JavaScript “movie” would be really exceptable to have such widths, or perhaps when you’re presenting something on a huge screen. I’m sure there’s other reasons, but Opera should really fix this. Making it negative doesn’t help anyone…

  2. Good to know. Though i’m kind of in agreement with Fabio. Who has 80 slides on their site?

  3. Permalink to comment#

    It should be fixed. But still, 32766 is a lot! You can cram a lot of content in 32766 pixels. They probably thought the same as Fabio.

    I’ve never been in a situation where i needed to set a CSS value to more than 1500.

  4. Sean
    Permalink to comment#

    Actually, long story short, you should have implemented the correction to the AnythingSlider the correct way. Just saying…

    • Well, I’m glad that I didn’t, because if I did, the JavaScript would be calculating widths over 32766 and the problem would still be popping up. So now it’s set to the maxium pre-fucked-up width.

    • Stuart
      Permalink to comment#

      But aren’t you now subjecting IE, Firefox, Chrome, etc. to that maximum of a width? Although they still have the ability to pass that width without erroring out?

      Wouldn’t it just be smart to use the Javascript method, but then putting in a restriction for Opera browsers so that their width can’t go over 32766px?

      Perhaps I’m missing something here, but I’ve never been a fan of these problems. Hopefully some day…

    • senshikaze
      Permalink to comment#

      so did you set it to 32766 or 9999px?

    • “Just saying…” is the internet equivalent of “I know I’m being a dick but I said it anyways…”

    • Brad
      Permalink to comment#

      LOL, your right. People, stop being dicks to Chris!

  5. Good to know.

  6. Permalink to comment#

    this is good news. I always wondered why it didn’t work in Opera.

  7. Permalink to comment#

    Few people may be using Opera now… but it is gaining market share quickly. And, it is, worldwide, the leading mobile browser.

    • Permalink to comment#

      aaaaand….. Opera Mini has just been submitted to the app store so it will soon be on the iphone (subject to apple allowing for a little competition)

    • Permalink to comment#

      Apple wouldn’t allow Google Latitude or Voice. I will be very surprised if they approve Opera Mini.

  8. Permalink to comment#

    Bugs like this bring me back to my days of desktop programming. Once I saw 32766 I had a good guess as to what the post was going to be about.

  9. oww interesting. /me makes notes

  10. Joaquin
    Permalink to comment#

    I know it bothers people good programming, but if you have such a big slide presentation, you should ensure that you are not loading all that images at once for the sake of the browsers performance and ram usage.

    Anyway, i understand a slider such big its ridiculous, and that its not necessary to load and erase slides in a range before and after the actual since the slider shouldnt be used in that scenarios.

  11. Definitely needs to be fixed, if the slider is the browser width, and the browser full width, in some computers, you may only fit in 12 slides. Which may not be enough, especially in the case of a photo gallery.

  12. Sean Foushee
    Permalink to comment#

    I can see horizontal sites requiring more than 32,766(7) pixels for presentation purposes, case in point:

    ONETWENTYSIX

    Thanks for the heads up.

    • I’m not sure that site is helping your case. That is ridiculous. God forbid you are on a laptop….that thing is huge by large. If you need 80 things to be shown, I’m not sure a slider is the way to go.

      If that is your site, by the way, then ignore everything above this line, and I apologize.

    • I have to agree with Jeremy, that site is unusable on a netbook or phone, even a small laptop. It’s a neat idea but just doesn’t work right.

    • I generally agree with this kind of comment, but come on. Sometimes to get the most striking design you have to make something that won’t properly work on a mini laptop screen or a phone.

      It’s taking it a bit far to say that even the most designed portfolios should be displayable on a phone…

    • senshikaze
      Permalink to comment#

      if they added horizontal scroll on scroll wheel down/up, if would be much better.

      but yea, that on a small screen would definitely drive me away

    • DN
      Permalink to comment#

      I totally disagree. That’s a great design. If they want, they can serve up a mobile version, but that’s no reason not to push the limits on a full computer. (I’m on a laptop, by the way, though with decent resolution.)

      The only improvement I’d make is to make it clear that using your arrow keys works (remarkably well). Because of the content, I didn’t even mind scrolling up and down a little bit. And, if I really had the time, I’d try to do a dynamic resize depending on actual window dimensions, but, along the lines of what Skilldrick says, this is about striking design, not safe design.

  13. Alex
    Permalink to comment#

    I have to say, 32,766 sure seems like it should be big enough for anything you might want. If your content is wider than that you really should be dynamically retrieving your slides piece by piece with aysnch calls, maybe pre-fetching a slide or two in either direction to be safe.

    Until screen resolutions are 15,000 pixels wide, I don’t foresee needing >32,000 pixels…

    Second just because the Opera stores their int values in signed 16-bit integers doesn’t mean the max width is 32,766 it means that the max value you can set is that. 1em > 1px, so what if you set the width to be 32766em (I realize you won’t really know how wide that is, but all you wanted was “wide enough” anyway).

    These are just initial reactions so let me know where I’m being an idiot.

  14. Permalink to comment#

    32766px is also the max height for (at least some older versions of) Safari.

  15. I’ve known for a long time that I’m a nerd, but you really have to be a super-nerd to host an argument several pages long over one stupid pixel. And I could be wrong because I haven’t used the Anything Slider, but I’m assuming it has an adjustment for the length of time each slide is shown, and if that’s the case, maybe someone jamming 80+ pics into it was creating a “stick-animation” film.

  16. Helen
    Permalink to comment#

    Don’t bother, Chris. I use Opera as my personal browser and unfortunately, a lot of jquery-plugins on my websides don’t run properly. Scrolltops thus for instance. These guys work perfectly in all browser except Opera. Just ignore it.

  17. Anil
    Permalink to comment#

    good man, this post helps to resolve opera bugs.

  18. Great..!

    Thanks..! العاب

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".