Reindeer theme problems

Hi.

I was happily using vaadin on chrome and it works fine.

Then, just out of curriousity, I tried it on firefox and IE and results were very bad.

buttons are different
panels are different
combobox doesnt have “down button” visible
visually buttons are different
on IE,whole window has scroller (vertical), but it is not needed¸
disable buttons are bolder

everything is much slower

Any suggestions? Please help!

It is normal, that FF and especially IE are much slower than Chrome and Safari. That’s is… So, if your main target are IE users, you probably may want to read a couple of performance optimization articles, recently posted here.

Regarding the UI look and feel - are you using just plain theme or you have your own theme, based on Reindeer and with your own stylenames and tweaks ?

Just plain Reindeer theme looks similar on all browsers, however, it does contain a lot of triggers and browser-specific blocks to satisfy all browsers. So if you are maintaining your own reindeer-based application theme - you may need to add more tweaks in your css.

If you can also post some screenshots here to show the rendering diffs, that would be very helpful to suggest something more specific.

P.S. And I would also recommend to regularry test the application during development process in IE (if you have any plans to use this browser) as this (IE) is a real headache for all of us but unfortunately, we have to live with it %)

What Dmitri said. I’ll add some more:

The Reindeer theme should look pretty much the same in all browsers except IE6. In IE6 you get plainer buttons and shadows, but otherwise similar results.

But since it is not feasible to try to achieve a pixel perfect similarity across all browsers and platforms, you can see differences in all browsers, if you look closely (text-shadows and border radiuses, for example).

Screenshots would help, indeed, and the version of Vaadin you’re using. And if you’re using a custom theme, try your app with plain Reindeer to see if the problems are in your CSS.

I’ll go into detail with some of the issues, try to clarify them:


“buttons are different” (and “visually buttons are different”)

In IE6 they should be, all other browsers should look similar, text shadows and font rendering excluded.


“panels are different”

I think I actually spotted a bug right here: in IE6 the normal Panel background is transparent. Will be fixing it to 6.1.2. Other IE versions should work fine.


“combobox doesnt have ‘down button’ visible”

This really sounds like a client-side rendering bug, not a theme issue, but can’t really tell with this info. Be sure to refresh browser caches if you’ve recently updated your Vaadin version.


“on IE,whole window has scroller (vertical), but it is not needed”

This too sounds like layout rendering bug. (I assume you’re talking about the main browser window, not about Vaadin sub-windows)


“disable buttons are bolder”

If you’re using NativeButtons, then IE does that for you. Disabled INPUT element’s text (BUTTON element included) are rendered to look as inset, which will make it look a bit more heavy.