Page Content Doesn't Scroll Far Enough, Can't scroll far enough to see the entire page |
Page Content Doesn't Scroll Far Enough, Can't scroll far enough to see the entire page |
John B |
Aug 2 2017, 09:30 AM
Post
#1
|
Newbie Group: Members Posts: 12 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 |
CharlesEF |
Aug 3 2017, 04:32 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
CharlesEF |
Aug 4 2017, 12:42 AM
Post
#3
|
Programming Fanatic Group: Members Posts: 1,981 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. |
CharlesEF |
Aug 4 2017, 03:27 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
John B |
Aug 4 2017, 12:39 PM
Post
#5
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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. |
Christian J |
Aug 4 2017, 03:36 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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). |
CharlesEF |
Aug 4 2017, 07:14 PM
Post
#7
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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. |
CharlesEF |
Aug 4 2017, 09:15 PM
Post
#8
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
John B |
Aug 7 2017, 09:12 AM
Post
#9
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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 |
CharlesEF |
Aug 7 2017, 10:29 AM
Post
#10
|
Programming Fanatic Group: Members Posts: 1,981 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>.
|
John B |
Aug 7 2017, 02:10 PM
Post
#11
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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. |
CharlesEF |
Aug 7 2017, 02:44 PM
Post
#12
|
Programming Fanatic Group: Members Posts: 1,981 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. |
John B |
Aug 7 2017, 03:17 PM
Post
#13
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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. |
CharlesEF |
Aug 7 2017, 05:20 PM
Post
#14
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
John B |
Aug 8 2017, 01:29 PM
Post
#15
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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> |
CharlesEF |
Aug 8 2017, 04:18 PM
Post
#16
|
Programming Fanatic Group: Members Posts: 1,981 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. |
John B |
Aug 15 2017, 01:12 PM
Post
#17
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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. |
CharlesEF |
Aug 15 2017, 02:01 PM
Post
#18
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Well, was that at least the correct content you wanted centered?
|
John B |
Aug 15 2017, 04:09 PM
Post
#19
|
Newbie Group: Members Posts: 12 Joined: 2-August 17 Member No.: 26,470 |
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. |
CharlesEF |
Aug 15 2017, 04:40 PM
Post
#20
|
Programming Fanatic Group: Members Posts: 1,981 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> |
Lo-Fi Version | Time is now: 25th April 2024 - 12:31 PM |