Strange things happen to background-image in Opera 10.6.3

HTML & CSS
1

Hello!

I want to report a really strange behaviour in Opera 10.6.3.

Please take a look at this page in Opera and compare to Firefox, Safari or Chrome: www.juliaeller.com

I rotated my wrapper three degrees and now the background-image shows strange lines in Opera 10.6.3. This only occurs when rotating.

#wrapper {
	width: 50em;
	margin: 0 auto;
	margin-top: 5em;
	background:url(bgTile.gif) repeat;
	padding: 3.5em 0 5em 0;
	color:#B8B8B8;
	border-radius: 1em;
	-moz-border-radius: 1em;
	transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
}

Can anyone explain this behaviour? Is it a bug in Opera?

Greetings, Julia

2

Hi,

Looks like an opera bug with the repeating image when transformed.

You can disguise it with the background color.



#wrapper {
    width: 50em;
    margin: 0 auto;
    margin-top: 5em;
    backgroun[B]d:#222 u[/B]rl(http://www.juliaeller.com/bgTile.gif) repeat;
    padding: 3.5em 0 5em 0;
    color:#B8B8B8;
    border-radius: 1em;
    -moz-border-radius: 1em;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);

}

Maybe you should report it.

3

Thank you, Paul! I have reported it.

4

Can anyone explain this behaviour? Is it a bug in Opera?
You need to keep in mind that CSS3 transitions are still in the development stages with vendor extensions being needed for browsers testing with them.

Several months ago I was playing around with them too and I remember running into buggy behavior with Opera and a BG color on transition. I remember making notes about it in the CSS with a ? beside it.

I was able to find a workaround that required setting a BG color on the element in another selector other than the one that had the transitions on it.

http://www.css-lab.com/demos/navbar/css3/rollout-anchor.html

#nav a.lastfm,
#nav a.goodreads,
#nav a.steam,
#nav a.facebook,
#nav a.twitter {
    [COLOR=Blue][COLOR=Black]background-color:#CCC[/COLOR];[/COLOR] [COLOR=Blue]/*set BG color on all classes (Opera needed this)*/[/COLOR]
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

/*=== CSS3 Transition Enhancements ===*/
#nav a  {

    -moz-transition-property: background-color, width;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: background-color, width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in;
    -o-transition-property: background-color, width;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease-in;
    [COLOR=Red]/*[COLOR=Black]background-color:#CCC;[/COLOR] had to be set on classes above for Opera?*/[/COLOR]
    width:70px;/* show BG image icon only*/
}