|
HTML - Chrome Flickering During Transform: Rotatey Transition
Hi everyone, first post. I'm happy to have found an active forum for HTML related questions.
I have a pretty simple and short HTML document I'm working on. The effect I'm looking to test out is a page turning effect. Using some examples I found on Apples Safari learning pages I put this together. It does work in Safari, it should work in Chrome, and it will not work in IE or Firefox. The question is: Why doesn't this work in Chrome? I'm using Chrome 16.0. The animation works but it flickers during the animation. This must be related to the backface-visibility css rule I have in place but I cannot figure out how or why it's messed up. Here is the code I'm working with. It's complete and you should be able to create a new html document, paste it in and open it with Safari (working) or Chrome (not working right). NOTE: this will not work in IE or Firefox as far as I know. Thanks for any help or advice anyone can offer! HTML Code: <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.Box {
position: absolute;
width: 500px;
height: 500px;
top: 10px;
right: 20px;
background-color: pink;
-webkit-perspective: 1000;
}
.Box .card {
position: absolute;
left: 10px;
top: 10px;
width: 480px;
height: 480px;
}
.card {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
-webkit-transform-origin: 0 50%;
}
.card.flipped {
-webkit-transform: rotateY(-180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
}
.front {
}
.back {
-webkit-transform: rotateY(180deg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var Card = $(".card");
$(".card").on('click', function () { Card.toggleClass('flipped'); });
});
</script>
</head>
<body>
<div class="Box">
<div class='card'>
<img class="face back" src='http://i.space.com/images/i/5974/i02/050207_planet_compare_02.jpg?1294095654'
alt="Image" />
<img class="face front" src='http://mygimptutorial.com/preview/the-ultimate-gimp-planet-tutorial-preview-all.jpg'
alt="Image" />
</div>
</div>
</body>
</html>
Similar TutorialsI want to open a new page from an existing one. I'm using javascript but the result is a bit clunky. I'd appreciate any ideas. The first page is at: http://www.primrosehillca.org.uk/act...intro_new.html (This page is all .SWF, I can send the html code if required.) And the next page is: http://www.primrosehillca.org.uk/activities.html Hello, I came accross these lines of code on some random webpage, and since I hadn't seen them before, I decided to experiment with them: Code: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> <meta http-equiv="Site-Enter" content="blendTrans(Duration=1.0)"> The thing is, it is a code placed in the <head> to give fading transitions between pages, and this validates as HTML, so it must be a legal way of doing it. However, it only works in IE and not in any other browser I have tried. So I guess my question is, does anyone else have any experience with this? Is this an IE only piece of code that just happens to validate? I know a lot of the normies here are probably getting tired of my posts. If so, let me know. This just seems to be the one stop place for most of the questions I have that dal with web page design. Anyways, if anyone read past the first paragraph, I have yet another question. Is the transition from HTML to CSS hard? The HTML book I am studying (which I just NOW found out is from 2003... ) teaches me a lot that I didn't know before and has really got me going with HTML more than any other book. It's teaching me HTML 4 and I realize there is now an HTML 5. The author even mentions that some of the tags it uses are deprecated (the book will later go on into CSS to replace those tags). Is it confusing to switch out tags like that when moving to CSS? I'm the kind of person who likes to stay up-to-date with stuff and HTML & CSS I want to be up to par on for sure. Am I going to have to learn HTML 4, then HTML5, then CSS since I'm pretty much just starting out? Sorry for all the questions. Just really curious and need to know ahead of time. Not that I would quit learning if it was a long process, it's just how I am . Any responses would be appreciated! Hello everyone, I need some knowledge, and if possible some code(!) which will enable my website to function correctly in Google Chrome. I already have code in place for IE browsers but upon inspection of our customers most used browsers Chrome has come up in second place (35%) and I need to make sure it works as it should! The problem, and its just a little one, is that ONE of my pictures floats over my search bar (floats left when it should be middle) If you have google chrome, take a look: http://www.alternativeroutefinance.co.uk/vehicles - naturally you can view the source and see if you can come up with something to help me out! Does anyone have any advice to offer? many thanks hi, my site logodepot.co.uk has a javascript slideshow at the top right of the page, this does not show in google chrome however? any ideas? thanks My website used to work properly but now, the portion that lets people travel into the different portion of the site does not appear anymore on Internet Explorer 8.0.7600? When editing with my PHP tool, it works. When using Google Chrome it works also. Therefore, I would say it is a technicality between the version of Explorer. Where or how can I check this. www.automatisationajp.com Thank you in advance for your help. stay1001 I am a beginner and I used blogger in Chrome to create a blog. When I checked how it looked in IE it was horrible. The banners and some images did not move over correctly which I have hosted on photobucket. Can somebody look at my code and help me format it to IE. What's wrong? When you look at the main page, everything looks fine in all browsers. But when you go to one of the pages where the main page is longer than the menu, like this page, the menu gets "stretched" in IE... But not in FF or Chrome. I've searched and searched in my HTML codes, and tried all I can think of, but nothing solves the problem. I just can't find the error. I hope someone can look at the HTML codes and help me Hello everyone! First, I want to point out that I have next to no knowledge about website development/design. Anyways, I gained basic knowledge over the course of many months and finally launched a site for my business. But I'm having one major issue: My website is not being rendered properly on Chrome. When I say "not...properly", I mean it's not displaying most of the essential content. The website is running very well on IE and Firefox, just not chrome. Website: www.khangp.com I would really appreciate anyone who could shed some light on what could be causing this. I just can't seem to figure it out! Thank you! So im on my way in building this gallery. Pleas look at it here. The problem is with IE (big suprise) In some weird way it wont place the pictures inside the designated place. AND .. i REALLY cant explain this one error, the first picture of the gallery.. and only the first one, IE displays is in a TILTED way?? I was like, huh??? Chrome and FF displaythe page in exactly the same way. The page isnt finished yet but on its way, I would like to see IE respond in a normal way for once.. thanks for reading! Hi, I made a sliced up header in Photoshop and then created rollovers in dreamweaver. It works great on IE and on Firefox, but at the top of Chrome the top few pixels are shifted way to the left. Why would this happen just in Chrome and how can I fix it? The site is http://www.socalstandup.com/ Thanks a lot! Hello my name is hency m new to html and css i just made one website and its working fine in IE and firefox. but when i tried in opera and chrome , it didnt work all margins were messed up. here is my website add: http://hencyparmar.byethost8.com/ i hope to get reply soon u can mail me at hencyp@gmail.com thanks Hi! this is really weird. I build a simple page with a table with a background picture. In Explorer it's all good but in Chrome & Firefox, you cant see the background picture of the table. help please? thanks Jeni I have made the usual searches but none of the information I found about Chrome positioning bugs seems to apply to this problem. I am using an absolutely defined div within a relatively defined div to position a marker box over sequential navigation bar graphics. The divs are defined in the CSS file, and then a single style line defines the box top margin in each page file. This works perfectly in FF and IE, but under Chrome the box position slowly creeps downward, by about 2 percent of the top distance, until the lowest instance is well off center. Can I fix this without going to browser-specific code? The page is temporarily he http://www.nitropress.com/CLIENT_TES...Pono/index.php And the relevant code is: Code: #navbar {
float: left;
width: 200px;
max-width: 200px;
position: relative;
padding: 9px 0 0 0;
}
#navbar img {
margin: 0 0 20px 0;
padding: 0;
}
#navbar .markbox {
position: absolute;
min-width: 200px;
max-width: 200px;
height: 30px;
border-top: 2px solid #c99;
border-bottom: 2px solid #c99;
z-index: -5;
}
...with lines like this in each page file to position the marker box vertically: Code: <style>.markbox {top: 3px;}</style>
Hi, I've spoiled my eyes searching what's wrong with my code: IE 8 works ok with links, Chrome and Firefox shows links only as text. Can someone with brighter eyes & brains tell me what went wrong? Here is the code: _____________________________________________________ HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
_____________________________________________________
CSS:
_________________________________________________
a, a:link { text-decoration: none; color: #fff; }
a:visited { text-decoration: none }
a:active { text-decoration: none }
a:hover { font-size: 24px }
#navigation ul {
padding: 24px 0px;
}
#navigation ul li {
margin: 0;
list-style-type: none;
}
#navigation {
font-size: 20px;
font-weight: bold;
float: left;
text-align: center;
width: 199px;
}
#navigation .center {
background: url('images/navi-backgr.png') repeat-y top left;
}
____________________________________________________________
xHTML:
____________________________________________
<div id="navigation">
<div class="center">
<ul>
<li style="color: #feffd8; font-size: 5">Thispage</li>
<li> <a href="another.html">Anotherpage</a></li>
<li> <a href="third.html">Thirdpage</a></li>
<li> <a href="fourth.html">Fourthpage</a></li>
<li> <a href="last.html">Lastpage</a></li>
</ul>
</div>
</div> <!-- /navigation -->
____________________ tnx, Lug. Hello All, My site is loading everything correctly with IE but in Firefox and Google Chrome it looks like butt. I have a checker and it says there are a bunch of errors but I have no idea how to fix them. Can anyone help me? Thank you. www.canapictures.com Hello everyone! Thank you for taking the time to read this. Could anyone please look at my site in IE or FF and tell me how to remove the gap between the table row that has the links at the top and the row that starts the content? The address is http://www.hard2kill.org. I figure it would be less cluttered by leaving the code off of this post and just accessing the page source from the site; however, if you would like me to post it here, I certainly can! When I view it in Chrome, it looks just fine. IE and FF show the gap. Yes, I know using tables this way is bad designing, but I am continually learning more and trying to transition from them, so please leave personal opinions to yourself. If a fix can be made, then I would appreciate your input! I have all the cellspacing, cellpadding, and borders set to 0 so I am at a loss. Thanks in advance! hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there . here's a demo of my work : http://anisa.me/work/ Any help would be highly appreciated . Greetings, If you access the following website http://www.chrisnieratko.com/ in IE / Firefox, you can view the site perfectly. However, with Chrome / Safari, you can't. You just see a bunch of code with ascii question marks. I know it's missing the doctype declaration, but is it the question marks that make it not visible for those browsers? (Chrome / Safari) When the site's pages are opened in notepad, textpad and notepad++, the question marks aren't there... so how do you eliminate them? Does anybody know of another editor that will view / edit these? Does anybody know if that's even the problem? How did they just appear out of nowhere? Most importantly; How would YOU fix this problem in the easiest way possible? (I'm guessing a certain type of text editor with a search function, then search / eliminate them and re-save the file?) Any help is MUCH appreciated! Thank you so much in advance for your time! |
|||||||