The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Page Content Doesn't Scroll Far Enough, Can't scroll far enough to see the entire page
John B
post Aug 2 2017, 09:30 AM
Post #1





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



I was just made aware of this by a user with a small-screen laptop. If the browser window is too small vertically, you cannot scroll far enough to see the entire content area. The smaller the window height, the less you can scroll. This means that our user with a small screen cannot scroll up far enough to see the text along the top of the Unity app. Even worse, we have a few links at the top of the window, above the Unity content, and those end up behind the Unity content when the window height shrinks, so those are inaccessible as well. The link shows the problem if you make your browser window too short to view the entire page. It's the same on Mac and Windows and every browser I've tried. The Unity WebGL content is not supported on mobile.

Is there any way to force the browser to scroll all the way up and down, as well as keeping other links on the page from going behind the Unity content area? We really need our users to be able to see the Instructions link at the top of the page.

Cart and Pulley Sim
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 3 2017, 04:32 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm not sure this will fix anything but you should run your page through a validator. You have several HTML errors, like a missing closing </html> tag. Since you are using HTML5 try this link.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 4 2017, 12:42 AM
Post #3


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Seems that getting to the top of the page is not your only problem. You also can't get to the start of the left edge of the page. I can show you where the problem is but someone who knows CSS better will have to explain the why. In this line of CSS
CODE
.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
top: and left: are the 2 that cause your problem. I 'assume' the 'transform: translate' is only to center the content.

At the screen size I tested with I had to change the values to 'top: 112%; left: 128%;', depending on your test screen size you may need to adjust those values up or down. Maybe you need to use media queries to define the CSS for different screen widths?

BTW, on my full screen browser window your image doesn't start at the top either. It starts at the menu. Change the value to 'top: 68%;' to see the difference.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 4 2017, 03:27 AM
Post #4


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



After doing a little thinking I realized what is actually wrong with your CSS (at least I think I have). Your CSS rule '.template-wrap' is meant to center the image in both directions. So, you set things to 50%. But, 50% of what? That rule doesn't have a height: and width: setting. So, just add 'height: 100%; width: 100%;' to the '.template-wrap' rule and everything should work fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 4 2017, 12:39 PM
Post #5





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



QUOTE(CharlesEF @ Aug 3 2017, 05:32 PM) *

I'm not sure this will fix anything but you should run your page through a validator. You have several HTML errors, like a missing closing </html> tag. Since you are using HTML5 try this link.

There is a closing HTML tag on the very last line.

I tried that link, first error was "Start tag head seen but an element of the same type was already open." But that's not the case. The head tag it flagged was the first. The only other errors are some obsolete attribute tags.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 4 2017, 03:36 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,627
Joined: 10-August 06
Member No.: 7



QUOTE(John B @ Aug 4 2017, 07:39 PM) *

I tried that link, first error was "Start tag head seen but an element of the same type was already open." But that's not the case. The head tag it flagged was the first. The only other errors are some obsolete attribute tags.

You got that error because the first SCRIPT element comes directly after the <html> start tag, which makes the validator think the HEAD section is implied (the HTML, HEAD and BODY elements are mandatory, but their start and end tags are optional), so when the real <head> start tag appears on line 17 the validator flags that as a duplicate. (Hope that explanation made sense...)

The WIDTH and HEIGHT attribute values for the CANVAS element contain px units, which is invalid (px units are only used with CSS).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 4 2017, 07:14 PM
Post #7


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(John B @ Aug 4 2017, 12:39 PM) *

There is a closing HTML tag on the very last line.

I tried that link, first error was "Start tag head seen but an element of the same type was already open." But that's not the case. The head tag it flagged was the first. The only other errors are some obsolete attribute tags.
Christian J has already explained the missing </html> error. As for the other errors, errors are errors and should be fixed. Obsolete attributes might be removed completely in the future. Since your page only seems to load in Firefox you might not care about the errors, but you should.

Also, seems I get this error message 'The browser could not allocate enough memory for the WebGL content. If you are the developer of this content, try allocating less memory to your WebGL build in the WebGL player settings.' more times than the page actually loads. And, I was going to suggest that you place the 'height: 100%; width: 100%;' in the parent element instead of in '.template-wrap'. Since I can't load your page I can't tell you which CSS rule to use. If I can load it later I'll post back.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 4 2017, 09:15 PM
Post #8


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Ok, I got your page to load. The CSS rule you should change is '.template .template-wrap'. which appears to be empty at this time. Add 'height: 100%; width: 100%;' to that rule and you should be good to go. Don't change anything else.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 7 2017, 09:12 AM
Post #9





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



QUOTE(CharlesEF @ Aug 4 2017, 10:15 PM) *

Ok, I got your page to load. The CSS rule you should change is '.template .template-wrap'. which appears to be empty at this time. Add 'height: 100%; width: 100%;' to that rule and you should be good to go. Don't change anything else.

Thanks so much for your help. I do mostly Unity, so I'm no HTML expert.

I'm not sure why you can't load the page at all. It loads fine for me in all Mac browsers. The only problem I see, and has been reported to me, is the scrolling problem. A user with a 12-inch laptop reported that they can't scroll up to get to the Instructions link, but they can run the simulation.

Almost all of that HTML code was generated automatically by Unity when I built the app. The only file I modified is the index file, I added our logo and a link at the top of the page. All other files, including the style.css file, are unmodified by me.

I changed the style.css file to:

.template .template-wrap { height: 100%; width: 100% }

I also moved the <head> tag in the index file to the top. It did fix the scrolling problem, but it now does not load the Unity content.

This post has been edited by John B: Aug 7 2017, 09:15 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 7 2017, 10:29 AM
Post #10


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Are you saying that when you fixed the CSS some content stopped loading? You mentioned fixing the <head> tag but I remember the </html> tag missing/or in the wrong place. The </html> tag needs to be before <head>.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 7 2017, 02:10 PM
Post #11





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



QUOTE(CharlesEF @ Aug 7 2017, 11:29 AM) *

Are you saying that when you fixed the CSS some content stopped loading? You mentioned fixing the <head> tag but I remember the </html> tag missing/or in the wrong place. The </html> tag needs to be before <head>.

I think I uploaded the wrong file, so please disregard my previous comment.

It looks like changing the style.css file (and only that), as you suggested, worked. I'll see if it works for our testers. The update is posted, if you'd like to check.

Thanks again.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 7 2017, 02:44 PM
Post #12


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Well, I tried to load your page, about 6 times, but kept getting the memory error. But, I do see the logo and instruction link at the top. I had never seen that before.

Glad it worked out for you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 7 2017, 03:17 PM
Post #13





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



QUOTE(CharlesEF @ Aug 7 2017, 03:44 PM) *

Well, I tried to load your page, about 6 times, but kept getting the memory error. But, I do see the logo and instruction link at the top. I had never seen that before.

Glad it worked out for you.

Are you using Firefox on Windows? That's a known problem with the default settings since a recent Unity update. Something else I need to tweak.

Looks like this CSS problem is also new with a recent Unity update. Looking at older files generated by Unity, .template .template-wrap is NOT blank.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 7 2017, 05:20 PM
Post #14


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Yes, I'm using Firefox v54.0.1 on Windows 7 Pro. I think you should check with Unity about this problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 8 2017, 01:29 PM
Post #15





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



QUOTE(CharlesEF @ Aug 7 2017, 06:20 PM) *

Yes, I'm using Firefox v54.0.1 on Windows 7 Pro. I think you should check with Unity about this problem.

Firefox apparently needs more memory for Unity content, which is why we recommend our users use a different browser on Windows. It's an easy fix, I just need to up the memory setting from the default, and rebuild everything. But I can't do that yet.

We've now gone through all the pages that had the scrolling problem, and it looks like almost all were built with the same version of Unity, and had the same style.css file, which is now fixed. However, one of our simulations was built more recently, with the current version of Unity, and it too has the scrolling problem, but it does not have the blank definition. So I can't rebuild anything until I get this problem fixed with the current version of Unity.

All the other simulation pages are password protected, but here's the new style file:

CODE
.webgl-content * {background-color: black; border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}


And the new unmodified index file:

CODE
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Heat Engine</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/hea-WebGL.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 1024px; height: 768px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onClick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">Heat Engine</div>
      </div>
    </div>
  </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 8 2017, 04:18 PM
Post #16


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I would try changing this line of HTML:
CODE
<div id="gameContainer" style="width: 1024px; height: 768px"></div>
Change the height and width to 100%. Write down the old values, in case you need them again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 15 2017, 01:12 PM
Post #17





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



QUOTE(CharlesEF @ Aug 8 2017, 05:18 PM) *

I would try changing this line of HTML:
CODE
<div id="gameContainer" style="width: 1024px; height: 768px"></div>
Change the height and width to 100%. Write down the old values, in case you need them again.

Thanks.

That's the container for the Unity content, it's built to render at that size. This change makes the Unity area very tiny.

I have a feeling it's something in the .webgl-content style, but no idea what.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 15 2017, 02:01 PM
Post #18


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Well, was that at least the correct content you wanted centered?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John B
post Aug 15 2017, 04:09 PM
Post #19





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



QUOTE(CharlesEF @ Aug 15 2017, 03:01 PM) *

Well, was that at least the correct content you wanted centered?

Yes, there are three objects on this page, the Unity content (center), a logo (upper-left), and a link (upper-right). It's supposed to look and function just like the other pages with the older code that is now fixed. In other words, scroll all the way to the top.

I can send you PM with a link to this page (password protected), but it probably won't load properly in Firefox, like the others. Should work in Chrome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 15 2017, 04:40 PM
Post #20


This is My Life
*******

Group: Members
Posts: 1,423
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Until you send me the PM you could try wrapping the content in another <div>. Something like this:
CODE
    <div class="webgl-content">
      <div id="gameContainer" style="width: 1024px; height: 768px"></div>
       <div style="height: 100%; width: 100%;">
        <div class="footer">
          <div class="webgl-logo"></div>
          <div class="fullscreen" onClick="gameInstance.SetFullscreen(1)"></div>
          <div class="title">Heat Engine</div>
        </div>
     </div>
    </div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
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: 20th September 2017 - 06:44 PM