Game, Set…No Match

This is a hodge-podge collection of screenshots comparing obvious differences in browser display. As follows:

• Glow Effect on Hover - Chrome shrinks and pixelates the text.
• Return to Top - Firefox and Opera display the inset border and opacity change, giving the icon the appearance of being depressed upon hover. Chrome and Safari only reflect a shift in opacity.
• Post Top/Bottom Drop-Shadow - Drop-shadow for Firefox seems more pronounced than the other browsers, which look flat by comparison.
• Image Border Radius - As previously mentioned, the border and image have a radius applied which should give both rounded corners. This is only evident in Firefox.

I remember reading something about -webkit background clip. This may resolve the border issue or perhaps positioning a transparent avatar shell over the avatar with the proper z-index. Not this time around though, just something to keep in mind if I use this again.

I’m done.

Not waiting for the fat lady…

This Opera is over.

To resolve the font background issue for the slideshow, the text and title of the slideshow paragraphs needed to be set to transparent. Not by using “transparent” as a declaration, oh no. That would have been too easy. The color needed to be set to rgba(0,0,0, 0). This has been reported from more than one source on the internet as being the equivalent definition of transparent. More on this coming very, very soon…like one paragraph away.

Shown here are Before and After screenshots of the very special Opera issues. The Title  and the Copyright would not show. The blurred text effect is supposed to be created by setting the font color to transparent then setting multiple text-shadows over the “invisible” font. After figuring out the transparency issue with the slideshow, I substituted this declaration for transparent and applied it to the Title and Copyright.

I was very pleased to discover the Title and Copyright now displayed as blurred text, that is until you hovered. It would flash solid black, then jump to invisible and finally fade-in to solid white. Groan! Resetting rgba values to 255,255,255,0 fixed this.

The avatar was the last problem, or last straw, in this case. Yet another vendor specific prefix was necessary to get this to function. Upon hover, the avatar rotates 360 degrees and is upscaled in size. Only for Opera does any reduction in size after this crop the avatar. The avatar also leaves residual bits of itself behind after it is no longer hovered. The problem with the rounded double border and the square cornered image persisted. When the avatar was not hovered, the border radius applied solely to the image had no effect. Then I noticed the copyright in the lower left moved slowly off the page in correlation with the avatar becoming larger in size.

For myself, this is exactly like every other Opera I have had to deal with in my life. Extremely difficult to get through. My final on the Opera saga can be summed up by their icon. It’s not an “O” (oh), it’s a zero because it means absolutely nothing to me.

More than meets the eye…

One of the reasons I created my new CSS Toy Box blog was to compare browser performance and display. IE might enter the comparison at some future point. For now, it is too much work just to get IE to “play nice”.

Zooming the screenshots is recommended. Objective observations:

• Title - The blurred text is fuzzier for Firefox. There is no title (or lower left copyright) for Opera, although both appear upon hover.
• Avatar (hover) - Opera does not rotate or resize. Although border-radius rounding has been applied to avatar image and frame, image rounding only appears on Firefox.
• Background - Firefox linear gradient appears to be a duller grayish color throughout. Minor color variance noted for the remaining three. All other colors are comparatively standard.
  
• Post Border - Opera border margin is reduced for unknown reasons.
• Slideshow - Although the background is a semi-opaque white color, Opera has a solid text background fill.

I have more detailed observations pending.