Bug? Player Width/Height is different in Firefox/Chrome/IE

[Branigan]

I've been a bit slow and only just noticed all the icons, hotspots, buttons etc. when running Firefox or Chrome look larger than when running on Internet Explorer.

I set some text to display Player Width and Player Height, and in Internet Explorer it's 1920 x 1200 in full screen mode - 1920 x 1009 with browser menus - which is the correct size of the monitor's display.

With Firefox and Chrome it thinks the screen is only 1536 x 960 and so presumably has scaled everything up by 1920/1536 = x1.25.

There is no zoom setting anywhere in the browsers, but...that 25% difference rang a bell. I do have desktop display settings set to 125%, or the text and icons are too tiny.

I changed it back to 100% and now Firefox and Chrome think the display size is 1920, 1200 - which it is - but now Internet Explorer thinks it's 2400, 1500 - or at least that's what Pano2Vr is telling them all that they are using. All the buttons, hotpots, banners etc. are now 25% smaller than before in IE.

IMO, they should all be reporting 1920 x 1200 all the time, as it's Pano2Vr passing them the (incorrect) information. It should be taking the actual screen resolution and ignoring any desktop upscaling. Nothing that is part of the desktop scaling should have anything to do with the size of the icons, buttons etc. inside the panorama.

I also set the desktop scaling to 150% and the results look ridiculous. All the hotspots etc. are enormous as it reports that the screen is only 1280 x 800.

Also the Pano2Vr program itself doesn't work properly on a screen "that size", as it thinks that's the actual resolution and everything is scaled up and nothing quite fits. Even when in Full Screen mode, vertical slider bars are chopped off the edge , so you can't move between the various dropdown tabs on the right on the front screen - Autorotation and Animation, Transitions etc. - unless you use the mouse wheel to scroll between them.

I'm only using Single-Res images and they look the same throughout. I'm not going to test this, but is it possible that in Multi-Res mode it wouldn't load up the highest resolution tiles, as it "thinks" it's on a smaller screen, like an iPad?

Blaming the browsers again in 3....2....1?

[soulbrother]

A link to your (test-) project would be good, because we should be able to see it and to test it...

[Branigan]

A link to your (test-) project would be good, because we should be able to see it and to test it...

You can: Open up your own project in different browsers. Nothing special about mine. Even with the desktop set to the default 100%, it's still different in IE compared to the others.

Likely other browsers too. It needs to be consistent and we need to be able to control it.

As we've got Text to Speech for the few blind people who want to use a panoramic tour, maybe the partially sighted would also like a "Make everything bigger" button where we could increase the size of hotspots etc. ?

Didn't someone recently ask if you could increase the size of text in text boxes for mobiles? (Answer:<Bzzzt!> No.) Well, maybe this could do that too?

[Neal]

What you just posted is literally how scaling works. Windows-based programs get the screen width and height from Windows, not the monitor. You can change the report resolution by either scaling or changing the value in the "display resolution" setting. If you tell windows to scale by 125% it will report of resolution of ~25% less. if you change the display resolution setting to 1366x768, Windows will report a screen resolution of 1366X768.

Scaling in the browsers works in a similar manner.

I also went out and did a quick check. I checked Edge, Chrome, IE, Firefox and Opera. All reported the same size. Based on the numbers you stated, it sounds like you had the zoom set in IE at 125%. I don't know if you are using IE or Edge. IE was replaced by edge several years ago and doesn't have much usage anymore. But Edge, Chrome, Opera all use the same browser engine, Blink, and the same Javascript engine of V8. Firefox and IE use different engines but the same standards. The standards that IE uses are from when it was discontinued.

The zoom level doesn't appear to be exposed to javascript. That means that javascript can't adjust it. You can find some tricks on how to do that in CSS here:
https://css-tricks.com/scaled-proportio ... avascript/

[Branigan]

What you just posted is literally how scaling works. Windows-based programs get the screen width and height from Windows, not the monitor. You can change the report resolution by either scaling or changing the value in the "display resolution" setting. If you tell windows to scale by 125% it will report of resolution of ~25% less. if you change the display resolution setting to 1366x768, Windows will report a screen resolution of 1366X768.

I counter your with a

OK, maybe I was not clear enough. Firstly the resolution of the monitor as displayed is 1920x1200. Know how I know that? I took a screenshot of it and checked the properties. So, if you're saying Windows reports a Screen Resolution that is not the same as the actual number of pixels on the screen - which all my images editing programs manage to use just fine and because that's NOT what has changed - then something/someone somewhere is telling porky pies.

It reports it? Where, to what? Certainly not to anything else, such as itself, or NVidia or AMD or anything involved with actually drawing the pixels. That's still showing the correct resolution in everywhere that shows it. Only drawn elements, such as text, and icons are (selectively) applying the 125% increase which is in the "Making it easier to read what's on your screen by changing the text and other elements" setting and not the "Change Screen Resolution" bit.

Nothing else is affected. So, it's a choice. Webpages will usually just go with it to make everything look as if it's on a lower resolution screen - because that's why you asked it to make things bigger but still sharp, using the smaller pixels, instead of just setting the screen to a resolution of 1024x768 with big fat pixels - but I'd be highly surprised if you can't also ask what the actual resolution is if you need to. Which in this case: we do.

Scaling in the browsers works in a similar manner.

I also went out and did a quick check. I checked Edge, Chrome, IE, Firefox and Opera. All reported the same size. Based on the numbers you stated, it sounds like you had the zoom set in IE at 125%. I don't know if you are using IE or Edge. IE was replaced by edge several years ago and doesn't have much usage anymore. But Edge, Chrome, Opera all use the same browser engine, Blink, and the same Javascript engine of V8. Firefox and IE use different engines but the same standards. The standards that IE uses are from when it was discontinued.

Well, it's nice to have a hobby, isn't it?

Nope, IE was set to 100% with no Zoom on anything and just the defaults.

Doesn't change my point that: when the user changes the text and image scaling setting of their display - and not the resolution itself - it messes up my hotspot and images sizes outside of my control because, of course.... BROWSER!

Guess who gets the blame from the client when that happens and it looks different on two otherwise identical displays at the same 1920x1200 resolution?

What's that smell? Bull, Horse or Cow?

[Neal]

Let's put an end to this. Here is a link to a pano that shows width and height values from Pano2VR and javascript. The javascript values are independent of Pano2VR, they are directly from the browser.
https://hvolnew.com/Images2/widthHeight/index.html

For Edge, Chrome, Firefox, Opera, and IE you will see that changing the scale in the Window's setting affects all the values. The screen width reported by javascript reduces accordingly. With a resolution setting of 1920x1080 and a scale setting of 125% you get width and height reported by javascript of 1536x864. When at full-screen, Pano2VR gives you those same values.

Setting the scale within the browse is a little different. It changes the scale with the inside browser's widow, not outside it. So the full-screen value in Pano2VR reflect the Inner width value, but not the outer width or screen width.

When you change the resolution setting, the width and height values change in Edge, Chrome, Firefox and Opera. That is the standard. The old IE browser had many issues, one of which was inconsistent reporting of height and width. It displayed everything according to the Window's resolution setting but report the width and height from the display card. That meant that if your display card resolution was set at 1920 x 1080 and the resolution in Windows was set at 1280x960, a full-screen IE would report a screen width of 1920 while reporting a browser outer width of only 1280.

Run all the browsers on the same screen, with a browser scale of 100%. The icons are all the same size.

You got an eye roll because you reported things getting bigger at 125% scale as a bug.

[Neal]

For anyone out there that is using Internet Explorer, as in IE11. Upgrade now. Switch to Edge, Chrome, or Firefox. IE is not safe for general use anymore. It does not follow standards, it's usage is insignificant and it should not be used for web development.

[Branigan]

For anyone out there that is using Internet Explorer, as in IE11. Upgrade now. Switch to Edge, Chrome, or Firefox. IE is not safe for general use anymore. It does not follow standards, it's usage is insignificant and it should not be used for web development.

Is this really too hard a concept for you? I don't want the user to be able to mess up the sizes of the hotspots, images and anything else in the panorama with any settings they make because they want the TEXT to look larger when they are browsing, which they can still do on all browsers. Nothing to do with the Screen Resolution.

After I've carefully designed everything, I'd quite like the proportions to stay the same.

And can I just give you the addresses of all the users who might still be using IE 11 or any other browsers you've not checked so you can contact them directly? Cheers.

[Neal]

For anyone out there that is using Internet Explorer, as in IE11. Upgrade now. Switch to Edge, Chrome, or Firefox. IE is not safe for general use anymore. It does not follow standards, it's usage is insignificant and it should not be used for web development.

Is this really too hard a concept for you? I don't want the user to be able to mess up the sizes of the hotspots, images and anything else in the panorama with any settings they make because they want the TEXT to look larger when they are browsing, which they can still do on all browsers. Nothing to do with the Screen Resolution.

After I've carefully designed everything, I'd quite like the proportions to stay the same.

And can I just give you the addresses of all the users who might still be using IE 11 or any other browsers you've not checked so you can contact them directly? Cheers.

The browser scale feature is there for accessibility by those with sight issues. Its purpose is to make everything larger so that they can see it. Sorry, that messes up your layout. Allowing you to override what they want and need defeats the purpose of having it.

As for users messing up your site because of their setting, get used to it. Do you expect the panorama to work when javascript is disabled or they are offline? There are also 100's of browsers out there that don't follow current standards. Sites are not going to display the same on all of them. Many hardware/browser combinations will not be capable of handling the current standards. IE11 is one of those obsolete browsers. It is DEAD. Even Microsoft has stopped supporting it. Time to move on.

Last, slow down on calling everything a bug. The handling of the browser scale is working as it should. Just because it not how you like, doesn't make it a bug.

[Branigan]

The browser scale feature is there for accessibility by those with sight issues. Its purpose is to make everything larger so that they can see it. Sorry, that messes up your layout. Allowing you to override what they want and need defeats the purpose of having it.

Last, slow down on calling everything a bug. The handling of the browser scale is working as it should. Just because it not how you like, doesn't make it a bug.

Well, you might be resigned to the user being able to break things, but I'd rather try and stop them.

You seem to concentrate on the nuts and bolts of why something can't be done. I don't care about the 'reasons', I want it better and consistent for the end-user and I'm not putting up a big info block of text with a long list of excuses on the front of every tour.

I'm quite capable of making hotspot icons as large as they need to be and if people can't already see them, then they wouldn't appreciate the rest of the panorama anyway. I also put a tiny bit of effort into selecting, editing and placing images on the screen at 100% of their actual size and fitting them on the screen correctly.

They can make the panorama itself as large as they need (Full Screen) and they can use the zoom controls to ...zoom in... but they shouldn't be able to mess up the placement of objects within it.

But, when the user sets the 'Text and Other objects' to 125%, then: hotspots start to obscure things and images are too big and can be slightly clipped by the screen edge. When they set it to 150% images are way too big and are clipped on all 4 sides. At 175% it's beyond ridiculous. Despite the panorama itself looking identical and using all 1920x1200 pixels of the actual display.

If I ask Player Width it says 1920 x 1200 = 1536 x 980 @125%, and 1280x800 @150%, and 1097.142 x 685.714 @175% which is it basically telling me they're viewing it on an iPad sized-screen. Not particularly helpful.

Your Javascript demo also gave the same values in full screen mode as I get doing the same thing, so...thanks?

This is on all 'current' browsers, so still a problem, despite your concentrating on IE11.

I have tests in place to check the various sizes of screens and am scaling things accordingly to keep them on the screen for mobiles, tablets and desktops, but it looks like I'm going to need quite a few more of them to catch things like this if I want to avoid only being able to say: "Not me! Browser!". On everything.

Fine, I'll just have to do that, which will make everything more complicated and run slightly(?) slower (skin.js bloats at the drop of a hat), but it would be more useful to be able to filter out any 'upscaler' values on a particular platform and just rely on the pixels being actually displayed at the right size on that single piece of hardware.

I wonder: is Pano2VR clever enough to just display something at 100%, or does it first upscale it in a buffer to 150%, then downscale that back by 0.6667 to get back to the original size? Edit: No it isn't. With a 3D distorted hotspot, if you scale things down, it shrinks then stretches it back up to a blurry version of the original. Put one on the screen and use CTRL- to watch it getting progressively blurrier.

From the docs:

Multi Res

Select to output multiple resolutions of the panorama. This will allow users to see a sharper image when they zoom in – it keeps the image sharp at all zoom levels.If this is selected you’ll see the following settings:

I don't use Multi-Res, and that doesn't really tell you what it's doing and when it does it; but what happens with the panorama tiles when the user has selected 175% and it seems like the screen is only 1097 x 685 pixels? What size of tiles will it use and what happens when you zoom in further? Does it use the 2nd, or 3rd scaled down version of the tiles, or thinking it's on an iPad and has still lots of resolution available at the top level: just stretch those?

Or does it think it can use the smaller versions of the tiles and stretch them across a wider screen area and give you a softer image even when not zooming?

If it's completely incapable of actually knowing what resolution is appropriate for the actual number of pixels available on the display (because: Browser/Javascript), it doesn't seem possible that it can choose the correct tiles. Is that what a partially-sighted person needs? Or maybe with their partial sight they can't tell the difference?

If it really does know how many physical pixels there are on the display, then I'd also like to know. If you're not worried, that's fine too.

Either way: without having control over it: I consider it a bug. Where 'bug' is defined by me as 'unexpected and undesirable behaviour'.

Of course, many 'bugs' are just "Oops, hadn't thought to check for that." but there are just so many of them it's exhausting.

Edit: Hmmm... the "partially sighted" user can also add another layer of Zoom in the Browser itself (CTRL + in Firefox), so the hotspots look just ridiculously large, or shrink them down to munchkin size with (CTRL - ).

[Neal]

I wasn' sure how or if I should reply to this post. But since it shows a fundamental lack of understanding of several key points of web design, and how hardware & software interact, I decided to try. Some portions have been removed because they added nothing to the discussion.

Well, you might be resigned to the user being able to break things, but I'd rather try and stop them.

....

I'm quite capable of making hotspot icons as large as they need to be and if people can't already see them, then they wouldn't appreciate the rest of the panorama anyway. I also put a tiny bit of effort into selecting, editing and placing images on the screen at 100% of their actual size and fitting them on the screen correctly.

They can make the panorama itself as large as they need (Full Screen) and they can use the zoom controls to ...zoom in... but they shouldn't be able to mess up the placement of objects within it.

This is about the zoom feature within the browsers. It is an accessibility feature designed to help those with sight issues. It makes text, icons, and other objects bigger and easier for them to see. The larger objects may not be visually appealing to us and may break the aesthetics of our site, but they are needed by those with diminished sight. A good website doesn't try to prevent them from being used but works to assure that when they are used the site is still functional. In some cases, that may mean that menus, images, and text require scrolling.

But, when the user sets the 'Text and Other objects' to 125%, then: hotspots start to obscure things and images are too big and can be slightly clipped by the screen edge. When they set it to 150% images are way too big and are clipped on all 4 sides. At 175% it's beyond ridiculous. Despite the panorama itself looking identical and using all 1920x1200 pixels of the actual display.

If I ask Player Width it says 1920 x 1200 = 1536 x 980 @125%, and 1280x800 @150%, and 1097.142 x 685.714 @175% which is it basically telling me they're viewing it on an iPad sized-screen. Not particularly helpful.
...

This is on all 'current' browsers, so still a problem, despite your concentrating on IE11.

I have tests in place to check the various sizes of screens and am scaling things accordingly to keep them on the screen for mobiles, tablets and desktops, but it looks like I'm going to need quite a few more of them to catch things like this if I want to avoid only being able to say: "Not me! Browser!". On everything.

A 1920x1200 display with a browser zoom of 125% is reported as having a resolution of 1536x980. That is the same as a 1536x980 display with a browser setting of 100%. If your breakpoints and layout are set up correctly, there will not be an issue. The above-mentioned issues all indicate a layout with poor breakpoints. I'm not going to go into the fundamentals of responsive designs, there is more than enough information to be found on the web. If you are interested, google "responsive web design tutorial" or "CSS media queries tutorial"

...

If it really does know how many physical pixels there are on the display, then I'd also like to know. If you're not worried, that's fine too.

The number of physical pixels on the monitor should have no bearing on the design of a webpage. Trying to design around the number of physical pixels will result in poor and inconsistent displaying of your webpage. Simply put, the number of physical pixels may not match how those pixels are being used. How the hardware reports the pixels, settings in the OS, and settings in the browser can change how those pixels are being used. Instead, the webpages should be designed around the number of pixels REPORTED within the browser window. That is the only way to assure consistent results.

Either way: without having control over it: I consider it a bug. Where 'bug' is defined by me as 'unexpected and undesirable behaviour'.
...

That we agree on, however, none of the issues above is either unexpected or undesirable with a little knowledge.

[Branigan]

Well, I'm not sure it's always as easy as you say.
.

ok.jpg (13.8 KiB) Viewed 6026 times

zoomin.jpg (542.81 KiB) Viewed 6026 times

zoomout.jpg (813.08 KiB) Viewed 6026 times

ohyeah.jpg (42.61 KiB) Viewed 6022 times

basic.jpg (398.4 KiB) Viewed 6022 times

[Neal]

Well, I'm not sure it's always as easy as you say.

I have learned a lot since I designed that site almost 10 years ago. I have asked questions, studied, learned from my mistakes, and listened. My current projects are far more robust and mobile-friendly. With a little luck, I will be able to replace that old site in the near future.

The same goes for my panos. The initial ones were primitive. As I learned more, they have improved. They are still not perfect. But, I never said designing a good site was easy, nor have I implied that I never miss something. Every time I do a pano I try to improve. What I don't do, is blame my mistakes on the software or attack those trying to help.

[Branigan]

Well, I'm not sure it's always as easy as you say.

I have learned a lot since I designed that site almost 10 years ago. I have asked questions, studied, learned from my mistakes, and listened. My current projects are far more robust and mobile-friendly. With a little luck, I will be able to replace that old site in the near future.

The same goes for my panos. The initial ones were primitive. As I learned more, they have improved. They are still not perfect. But, I never said designing a good site was easy, nor have I implied that I never miss something. Every time I do a pano I try to improve. What I don't do, is blame my mistakes on the software or attack those trying to help.

Oh, there's no denying you've been very helpful on occasion - the recent nadir rotation fix was great, - but you do also make the odd leap in the dark about things that don't exist, such as suggesting I make up an octagonal shape instead of a cube because PTGUI's 14 sided (Heptagonal trapezohedron, apparently) does look better than the cube. That's when a little knowledge can become a dangerous thing and you're just guessing.

I also guess, but more often at least give it a poke myself before suggesting something that might cause someone else to potentially waste a lot of time on nothing.

Use your skills wisely, Master.

Likewise, reactive websites and CSS etc. have diddly squat to do with the problems in Pano2VR. I can - and have - made a perfectly good reactive website, but I cannot control things that Pano2vR is doing behind my back and then lying about it to me. This is akin to me making a serious dramatic movie and when a user watches it they press a button and all the character's heads grow to twice normal size. Funny, it may be... faithful to the original design it is not. I have a right to be a little annoyed about it.

With everything you've learned about Pano2VR, there is no way (that I currently know of, nor have you shown you know either) you can prevent me, or anyone else, messing up your panoramas with a simple CTRL+ or CTRL- in the browser; and that sucks. Now, despite what Martin's always taught in the webinars, I'll have a play tomorrow and see if using % on sizes works better than pixels. I'm not too hopeful though, as when I last tried it everything went a bit weird.

There are real potential problems, such as 3D Distorted hotspots losing their resolution (I suggested you place one and using CTRL- to watch it go blurry. How is that remotely helpful to anyone? I've done that, no guessing.) and what does happen with Multi-Res when it thinks it's on an iPad sized display when it's actually a PC with Display Size set to 175%? (I haven't done that, semi-educated guess/hypothesis that it might go a bit wonky)

I don't really care about Multi-Res, as Single-Res seems unaffected; but I think most people use it because: defaults, despite its performance being undewhelming, so do it for them. Then we can join forces on getting all the other problems addressed, such as....oh, the list is too long. You know...

[Neal]

...
I can - and have - made a perfectly good reactive website, but I cannot control things that Pano2vR is doing behind my back and then lying about it to me. ....

This is the issue, you want to blame Pano2VR for everything. Was it cloudy when you took the photos, Pano2VR should have arranged for better weather. Nor is Pano2VR lying to you about anything. It is accurately reporting the screen resolution as it is set by the user.

With everything you've learned about Pano2VR, there is no way (that I currently know of, nor have you shown you know either) you can prevent me, or anyone else, messing up your panoramas with a simple CTRL+ or CTRL- in the browser; and that sucks.

I do know, it can't be done from a webpage. I think I said that earlier. Javascript does not have access to that feature. If you think that it should, here is the contact form for ECMA Internations. They set the standards for Javascript.
http://www.ecma-international.org/contact/contact.html

Now, despite what Martin's always taught in the webinars, I'll have a play tomorrow and see if using % on sizes works better than pixels. I'm not too hopeful though, as when I last tried it everything went a bit weird.

I never had any luck with the % unit. The vw and vh units work much better, but those aren't currently options. I do see there is a 'CSS' setting. If I have time I might play around with that.

There are real potential problems, such as 3D Distorted hotspots losing their resolution (I suggested you place one and using CTRL- to watch it go blurry. How is that remotely helpful to anyone? I've done that, no guessing.) and what does happen with Multi-Res when it thinks it's on an iPad sized display when it's actually a PC with Display Size set to 175%? (I haven't done that, semi-educated guess/hypothesis that it might go a bit wonky)

I use SVG files for custom hotspot images, so I don't have those issues with resolution loss or distortion. PNG will get blurry if you expand them larger than their original size. That is the nature of raster file formats. As for the zoom and multi-resolution, I zoomed my current project up to 500% without an issue.

I don't really care about Multi-Res, as Single-Res seems unaffected; but I think most people use it because: defaults, despite its performance being undewhelming, so do it for them. Then we can join forces on getting all the other problems addressed, such as....oh, the list is too long. You know...

One of the key aspects of panos is the ability to zoom in and see details. The target market is not users on a decade-old cell phone with a 3G connection and only one bar.