All geek questions in one place

Does the -webkit transition work fine in HTML4 transition, but not in HTML5?

I run my application on Google Chrome and webkit compatible Safari. I create a rolling div using the -webkit transition.

It worked fine when I had a doctype specified as HTML 4 transient (! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Transitional // EN"), but our requirement is HTML 5. When I install doctype (! DOCTYPE HTML), the transition completely stops working.

I ran my code using HTML5 validation and cleared all errors (except tags).

Am I misunderstanding something?

Here is the relevant code:

<!DOCTYPE HTML> <html> <head> <title>Shopping List</title> <style> ul{margin:0;padding:0;} li{display: inline; float: left;} body{ background-color: #475c76; font-family: Arial; font-size: 18pt; font-weight: bold; } #wrapper{ height: 600px; width: 800px; } /* Main menu */ #mainMenu{ height: 83px; background-image: url(img/mainMenu_bg.png); } #mainMenu li{ height: 57px; margin: 13px 0; display: inline; float: left; color: #475c76; } #mainMenu li a{ color: #475c76; padding: 0; text-decoration: none; background-image: url(img/btn_main.png); background-position:0 0; height: 57px; width: 197px; text-align: center; line-height: 40pt; display: inline-block; } #mainMenu li a:link{ } #mainMenu li a:active{ background-position: 0 -57px; color: white; } /* Page body */ #pagebody{ overflow: hidden; height: 417px; background-color: #DDDDDD; } /* Submenu */ .subMenuWrapper{ height: 80px; width: 800px; overflow: hidden; position: absolute; top: 421px; left: 0; } #subMenus{ position: absolute; background-image: url(img/subMenu_bg.png); height: 80px; width: 1600px; -webkit-transition: all .4s; } #subMenus ul{ width: 780px; padding: 0 10px; display: inline; float: left; } #subMenus ul .floatright{ float: right; } /* Buttons */ a.button{ color: white; text-decoration: none; background-position:center 0; text-align: center; display: inline-block; } a.button>*{ display: inline-block; margin-top: 10px; height: 60px; background-image: url(img/button1.png); line-height: 40pt; } a.button .l{ width: 14px; background-position:top left; } a.button .t{ background-position:top center; color: #AABBCC; padding: 0 10px; } a.button .r{ width: 14px; background-position: top right; } a.button .larrow{ width: 24px; background-image: url(img/buttonpointies.png); background-position:top left; } a.button .rarrow{ width: 24px; background-image: url(img/buttonpointies.png); background-position: top right; } a:active.button .t{ background-position: center -60px; color: white; } a:active.button .l, a:active.button .larrow{ background-position: left -60px; } a:active.button .r, a:active.button .rarrow{ background-position: right -60px; } /* List */ #scrollingWrapper{ overflow: hidden; } #scrollingWrapper>div{ display:inline; float:left; } #scrollingList{ position: relative; width: 660px; -webkit-transition: all .5s; } .lineItem{ height: 60px; width: 100%; border-top: 3px solid white; border-bottom: 3px solid gray; font-size: 24pt; padding: 3px 8px; background-color: #E8E8E8; } .lineItem *{ height: 57px; display: inline; float: left; } .lineItem .text{ margin: 7px 14px; } .lineItem .checkbox{ background-image: url(img/btn_check.png); width: 44px; margin:0; } /* Scroll buttons */ .scrollArea .scrollBar{ display: inline; float: left; background-color: #D0D0D0; height: 334px; width: 5px; margin: 2px 0 2px 28px; padding: 0; border-radius: 3px; } .scrollArea .scrollBar #elevator{ position: relative; background-color: gray; height: 100px; width: 5px; -webkit-transition: all .5s; border-radius: 3px; } .scrollArea .scrollButtons{ display:inline; float:left; margin-left: 12px; margin-top: 100px; } .scrollArea .scrollButtons li{ display: block; float: none; padding: 4px 0; } .scrollArea .scrollButtons li div{ margin:0; display: inline; float: left; } .scrollArea .scrollButtons li div img{ padding-top: 10px; } /* Footer */ #footer{ position: absolute; top: 500px; height: 100px; width: 800px; border-top: 3px solid black; } #footer img{ margin: 5px; float:left; } #footer #datetime{ margin-top: 20px; } #footer #datetime *{ float: right; color: #AABBCC; text-align: center; color: #AABBCC; display: block; width: 160px; } </style> <script> var arrList = ["Milk 1%", "Bread", "Granny Smith Apples", "Oatmeal","Potatoes", "Yogurt", "Muffins", "Spaghetti", "Crackers", "Pancake Mix", "Melons", "Ice Cream", "Perogies", "Cottage Cheese", "Canned Peaches","Red Delicious Apples", "Ground Beef", "Salmon Steaks", "Popcorn", "Salt", "Tea", "Coffee", "Light Bulbs", "Eggs", "Bacon"]; var lineHeight = 72; var windowHeight = 338; var scrollBarHeight = 335; var scrollAmt = lineHeight*4; var listHeight; //tbd var elevHeight; //tbd function init(){ popList(); // upon finished loading listHeight = (arrList.length)*lineHeight; document.getElementById('scrollingList').style.top = 0;//needs to be explictly set so that it can be read later, otherwise it is undefined elevHeight = windowHeight/listHeight*scrollBarHeight; document.getElementById('elevator').style.height = elevHeight; document.getElementById('elevator').style.top = 0; } function popList(){ // populate list from arrList // THIS CODE IS RUN INLINE var listHTML = ""; for (item=0;item<arrList.length;item++){ listHTML += '<div id="lineitem'+ item +'" class="lineItem" checked="false">'; listHTML += ' <a href="javascript:void(false);" id="check'+ item +'" class="checkbox" onmousedown="check(this, true)" onmouseup="check(this, false)"></a>'; listHTML += ' <div class="text">' + arrList[item] + '</div>'; listHTML += '</div>'; } document.getElementById('scrollingList').innerHTML = listHTML; } function scrollme(dir){ var yMax = windowHeight-listHeight; var yMin = 0; if (dir>0){ // scroll down (list physically moves up, listPos goes more negative) _setlistPos(Math.max(_getlistPos() - scrollAmt, yMax)); } else{ // scroll up (list physically moves down, listPos goes more positive) _setlistPos(Math.min(_getlistPos() + scrollAmt, yMin)); } _setscrollPos(); function _getlistPos(){ return parseInt(document.getElementById('scrollingList').style.top); } function _setlistPos(y){ document.getElementById('scrollingList').style.top = y; } function _setscrollPos(){ document.getElementById('elevator').style.top = -(_getlistPos())*scrollBarHeight/listHeight; } } function editList(editState){ if (editState){ // show 2ndary menu document.getElementById('subMenus').style.left = -800; } else{ // return to primary menu document.getElementById('subMenus').style.left = 0; } } function check(button,clickState){ var lineitem = button.parentNode; if(clickState){ // button pressed button.style.backgroundPosition = "0 -57px"; } else{ // button released if (lineitem.getAttribute("checked")=="false"){ // box was unchecked, so check it lineitem.setAttribute("checked","true"); button.style.backgroundPosition = "0 -114px"; } else{ // box was checked, so uncheck it lineitem.setAttribute("checked","false"); button.style.backgroundPosition = "0 0"; } } } function deleteChecked(){ var tempArrList = []; for (item=0;item<arrList.length;item++){ var lineitem = document.getElementById("lineitem" + item); if (lineitem.getAttribute("checked")!="true"){ tempArrList.push(lineitem.childNodes[3].innerText); } } arrList = tempArrList; init(); } </script> </head> <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onload="init()"> <div id="wrapper"> <!-- Main Menu --> <ul id="mainMenu"> <li><a href="">Home</a></li> <li><a href="">Shopping List</a></li> <li><a href="">Recipes</a></li> <li><a href="">Specials</a></li> </ul> <!-- Page body --> <div id="pagebody"> <div id="scrollingWrapper"> <!-- Scroll list --> <div id="scrollingList"> </div> <!-- Scroll Controls --> <div class="scrollArea"> <div class="scrollBar"><div id="elevator"></div></div> <ul class="scrollButtons"> <li> <a class="button" href="javascript:void(false);" onmouseup="scrollme(-1);"> <div class="l">&nbsp;</div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></div><div class="r">&nbsp;</div> </a> </li> <li> <a class="button" href="javascript:void(false);" onmouseup="scrollme(1);"> <div class="l">&nbsp;</div><div class="t"><img src="img/glyph_dn.png" width="35" height="35" alt=""></div><div class="r">&nbsp;</div> </a> </li> </ul> </div> </div> <!-- SubMenus --> <div class="subMenuWrapper"> <div id="subMenus"> <ul id="subMenu1"> <li> <a class="button" href="javascript:void(false);"> <div class="l">&nbsp;</div><div class="t">Button 1</div><div class="r">&nbsp;</div> </a> </li> <li class="floatright"> <a class="button" href="javascript:void(false);" onmouseup="editList(true);"> <div class="l">&nbsp;</div><div class="t">Edit List</div><div class="rarrow">&nbsp;</div> </a> </li> </ul> <ul id="subMenu2" class="subMenu"> <li> <a class="button" href="javascript:void(false);" onmouseup="editList(false);"> <div class="larrow">&nbsp;</div><div class="t">Done</div><div class="r">&nbsp;</div> </a> </li> <li class="floatright"> <a class="button" href="javascript:void(false);" onmouseup="deleteChecked()"> <div class="l">&nbsp;</div><div class="t">Clear Checked</div><div class="r">&nbsp;</div> </a> </li> </ul> </div> </div> </div> <!-- Footer --> <div id="footer"> <img src="img/main_ad_wave.png" alt=""> <div id="datetime"> <span id="date">Fri. Jan. 01</span> <span id="time">12:01am</span> </div> </div> </div> </body> </html>
+4
source share
2 answers

It seems that the problem is not in the transition, but in setting the properties.

 elevHeight = windowHeight/listHeight*scrollBarHeight; document.getElementById('elevator').style.height = elevHeight;

The height height property accepts a length, not an integer, and lengths (except 0) require units.

(There may be other problems, possibly similar, but the one I noticed in your code)

The Doctype you are using (HTML 4.01 Transitional without a URL) is considered by the browser as a reference to outdated code written before the correct (or almost correct) use of web standards became commonplace (i.e., around the end of the 90s). This invokes Quirks mode.

HTML 5 Doctype is designed to launch a standards mode in which browsers are much better standards (and much more consistent with each other - this is very desirable).

One of the errors that are emulated in Quirks mode treats integer values ​​as pixel lengths.

You need to specify the device. for example ... + 'px' .

(You also have some HTML errors that validator will detect)

+4
source

I suspect the problem is that it looks like you are trying to initiate a transition by changing CSS properties programmatically using Javascript. I’m not quite sure how well this function is supported, or how much it will be supported in the future.

Indeed, CSS transitions are intended to enhance the user experience, and not for such advanced animations. You seem to be trying to bend CSS to make it do things for which it is not intended. You might want to rethink your approach.

You might be able to achieve what you want using the keyframes of the CSS animation, otherwise why not just use the Javascript library like jQuery to do weightlifting? This approach will be much better suited to what you are trying to achieve.

0
source

Source: https://habr.com/ru/post/1336180/

More articles:


All Articles