Can't Scroll All the Way Up |
Can't Scroll All the Way Up |
John B |
May 17 2020, 05:05 PM
Post
#1
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
If the browser window is smaller (vertically) than the WebGL content area, even it a scroll bar is showing, you cannot scroll to the top of the window. We're running into this problem on Chromebooks with low-res screens, users can't scroll up to see the top of the Unity content and the graphic above that, though scrolling to the bottom works. Looks like the browser thinks the content is smaller than it really is. I'm not HTML expert, am I doing something wrong? Any way to fix this?
CODE <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Standing Waves</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="Build/UnityLoader.js"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "Build/sws_StandingWavesonaString.json", {onProgress: UnityProgress}); </script> <style type="text/css"> body { background-color: #000000; } </style> </head> <body> <table width="1050px" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1050" height="40" align="left" style="vertical-align:center"><a href="http://www.polyhedronlearning.com" target="_blank"><img src="../_graphics/PolyhedronPhysics_logo.jpg" alt="" width="324" height="26" /></a></td> </tr> <tr> <td style="vertical-align:top"> <div class="webgl-content"> <div id="gameContainer" style="width: 1024px; height: 768px"></div> </div> </td> </tr> </table> </body> |
Christian J |
May 17 2020, 05:22 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I see nothing in the code example that might cause that. Could you post the CSS and JS as well (or better link to a sample page)? Also, how is WebGL involved?
|
John B |
May 17 2020, 08:09 PM
Post
#3
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
I see nothing in the code example that might cause that. Could you post the CSS and JS as well (or better link to a sample page)? Also, how is WebGL involved? This page was generated by Unity3D, mostly. It started as the default page that Unity3D generates for a WebGL build. I wrapped the table around the Unity content, added the logo graphic at the top of the page, and changed the background color. The other js css files are generated by Unity. I can post those if that will help. On the following page, click "Standing Waves on a String." All the other links on this page have the same problem, though the others are unmodified default pages generated by Unity. http://www.polyhedronlearning.com/ppsims/p...rovisional.html user: Test1 password: poly123 This post has been edited by John B: May 17 2020, 08:10 PM |
CharlesEF |
May 18 2020, 12:11 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I think it has to do with the CSS, but what do I know? Try this, in the styles.css file change
CODE .webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} to CODE .webgl-content {position: absolute; top: auto; left: auto;} I have no idea if this will cause other problems.You can make these changes in your browsers style editor to see the changes before you edit the styles.css file. |
CharlesEF |
May 18 2020, 02:07 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
FYI, you could remove the top and left CSS rules completely and that is basically the same as setting them both to auto (I think).
|
John B |
May 18 2020, 12:54 PM
Post
#6
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
I think it has to do with the CSS, but what do I know? Try this, in the styles.css file change CODE .webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} to CODE .webgl-content {position: absolute; top: auto; left: auto;} I have no idea if this will cause other problems.You can make these changes in your browsers style editor to see the changes before you edit the styles.css file. You know a lot more than I do. I do a little web stuff every couple of years, and forget most of what I've learned in between. That worked! Thanks! This post has been edited by John B: May 18 2020, 12:55 PM |
Lo-Fi Version | Time is now: 28th March 2024 - 09:15 PM |