Error in HTML5 & CSS3 for the Real World?

With the book’s code loaded in Dreamweaver CS5 and viewed in
Opera 11.11, the bg-bike.png in “ad2” in the tertiary div does
not roll off the page as it does in all the other browsers.
Instead, when my cursor moves over it, it just disappears.
Here’s the relative code that I have loaded in Dreamweaver:

#ad2 {
height: 170px;
background-image:
url(…/images/bg-bike.png),
url(…/images/gradient.svg);
/* Mozilla gradient syntax /
background-image:
url(…/images/bg-bike.png),
-moz-linear-gradient(0% 0% 270deg,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/
W3C gradient syntax for WebKit /
background-image:
url(…/images/bg-bike.png),
-webkit-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/
W3C gradient syntax for Opera /
background-image:
url(…/images/bg-bike.png),
-o-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/
Unprefixed W3C syntax /
background-image:
url(…/images/bg-bike.png),
linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/
Old WebKit syntax */
background-image:
url(…/images/bg-bike.png),
-webkit-gradient(linear,
from(rgba(0,0,0,0.4)),
color-stop(37%, rgba(0,0,0,0)),
color-stop(83%, rgba(0,0,0,0)),
color-stop(92%, rgba(0,0,0,0.16)),
color-stop(98%, rgba(0,0,0,0)));

background-position: 50% 88%, 0 0;
-webkit-transition: background-position 1s linear 250ms;
-moz-transition: background-position 1s linear 250ms;
-o-transition: background-position 1s linear 250ms;
transition: background-position 1s linear 250ms;
}

Is there a problem with what I have copied? Or is it a problem
with Opera? Is this happening to anyone else?

Thanks for the feedback.

The code sample you posted is the same as in the book, and yes the cycle does disappear instead of travelling in Opera… it possibly could be a rendering bug.

Thank you for your reply. My first response was relief that it wasn’t happening just to me and I was doing it wrong. More importantly, though, when you say a “rendering bug,” does that mean that Opera is suppose to support this particular transition feature but for some (temporary?) reason, isn’t? In the Sitepoint book mentioned above (or below), the authors say Opera supports this feature. Don’t mean to belabor a point, but I’m trying very hard to keep track of what is supported by which browsers. The HTML5/CSS3 book does an excellent job of helping me with this, except for maybe this particular “rendering bug.” Thanks again.

I am not sure to be honest, you’d probably have to ask the authors or somebody that works at SitePoint to explain that one.

Although I do know that book looks like it contains at least two instances of errata [p54] and I sent a report about that on 07 June and they still haven’t got back to me yet…

Although so far they have reported some CSS errata: http://www.sitepoint.com/books/htmlcss1/errata.php

I tried to report this bug, but received what I think was a generic email suggesting I take this to the forums. I guess I went to the wrong place. Thanks for your feedback. It was helpful.

This is probably the correct place you should be airing the question if they sent you to the forums. Because it is an issue regarding whether the book was supplying ‘misleading’ or inaccurate information?

Perhaps if you post a similar thread (today) to this within: CSS - SitePoint Forums or [URL=“http://www.sitepoint.com/forums/web-page-design-1/”]Web Page Design - SitePoint Forums you might hit lucky if one of the hardcore CSS guys wants to look at the CSS in question (greater chance somebody who might know will see the post).

Since you didn’t seem to be getting any helpful information from the people who responded to your original query when you used the SP contact form. Maybe the volunteer SPF Staff or other members might be able to help if you post this question in the CSS forum. :slight_smile:

Thanks for the suggestion. I just posted a new thread in the CSS forum. We’ll see what happens. FYI: I tried to load the book’s practice website The HTML5 Herald in Opera just now and received a message that the site was offline, so maybe they are working on it.

Hmm http://www.sitepoint.com/forums/questions-256/http-thehtml5herald-com-down-764875.html

Yes, it appears it hasn’t been redirecting properly. Though just now it seems to be working though an hour ago it was still down.