The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Can't Scroll All the Way Up
John B
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 17 2020, 05:22 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,463
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post May 17 2020, 08:09 PM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 2-August 17
Member No.: 26,470



QUOTE(Christian J @ May 17 2020, 06:22 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 18 2020, 12:11 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,735
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 18 2020, 02:07 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,735
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post May 18 2020, 12:54 PM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 2-August 17
Member No.: 26,470



QUOTE(CharlesEF @ May 18 2020, 01:11 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th July 2020 - 11:45 PM