Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Page Content Doesn't Scroll Far Enough
Posted by: John B Aug 2 2017, 09:30 AM
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.
http://www.polyhedronlearning.com/CartandPulleySimulation/
Posted by: CharlesEF Aug 3 2017, 04: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 https://validator.w3.org/nu/.
Posted by: CharlesEF Aug 4 2017, 12:42 AM
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
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.
Posted by: CharlesEF Aug 4 2017, 03:27 AM
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.
Posted by: John B Aug 4 2017, 12:39 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 https://validator.w3.org/nu/.
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.
Posted by: Christian J Aug 4 2017, 03:36 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).
Posted by: CharlesEF Aug 4 2017, 07:14 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.
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.
Posted by: CharlesEF Aug 4 2017, 09: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.
Posted by: John B Aug 7 2017, 09:12 AM
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.
Posted by: CharlesEF Aug 7 2017, 10: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>.
Posted by: John B Aug 7 2017, 02:10 PM
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.
Posted by: CharlesEF Aug 7 2017, 02: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.
Posted by: John B Aug 7 2017, 03:17 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.
Posted by: CharlesEF Aug 7 2017, 05:20 PM
Yes, I'm using Firefox v54.0.1 on Windows 7 Pro. I think you should check with Unity about this problem.
Posted by: John B Aug 8 2017, 01:29 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:
.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:
<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>
Posted by: CharlesEF Aug 8 2017, 04:18 PM
I would try changing this line of HTML:
Posted by: John B Aug 15 2017, 01:12 PM
I would try changing this line of HTML:
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.
Posted by: CharlesEF Aug 15 2017, 02:01 PM
Well, was that at least the correct content you wanted centered?
Posted by: John B Aug 15 2017, 04:09 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.
Posted by: CharlesEF Aug 15 2017, 04:40 PM
Until you send me the PM you could try wrapping the content in another <div>. Something like this:
<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>
Posted by: John B Aug 15 2017, 06:48 PM
Until you send me the PM you could try wrapping the content in another <div>. Something like this:
<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>
I just tried playing around at random with the style.css file, and changing the second line looks like it fixed the problem:
.webgl-content { height: 100%; width: 100% }
Posted by: CharlesEF Aug 16 2017, 10:06 AM
Good to hear. Glad you got it worked out.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)