Is it possible to zoom out beyond the default settings in any browser to very minimal scales? Internet explorer 8 seems to zoom out the furthest...
Has anyone attempted this and if so, what method/coding should I use?
Apologies for the lack of coding - once I have a direction I can update my question with code if appropriate.
Related
Currently I am working on an offline web application which needs to be active even after I start working on the second window or even after it gets minimized.
I found a solution to keep the window active/focused even after shifting to a second window using chrome/Firefox flag options and it works smooth as expected, but it doesn't satisfy my second condition (browser window should be active even after minimizing it). Is there a way to keep the browser window active even after minimizing it? (Preferably for Firefox)
I tried all the possible flags available in both chrome and Firefox, but none of 'em worked.
P.S. I know it'll affect the system's performance by keeping the tab always active/focused even after it becomes secondary/minimized since chrome and Firefox keep this inactivity feature in place to improve the performance, however system performance is not an issue in my scenario.
Thanks in advance :)
I am working on a web application, and I am facing a lot of issues when zooming
Here is a blueprint of the architecture of the page :
lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.
I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.
Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.
The application is very old and it's working only in IE11 compatibility mode.
So my question is, how to fix the size of the page in different resolutions without modifying the emulator?
The application works fine when you use the Emulator because you define the resolution for it and the resolution won't change when zooming in this situation.
But zoom itself is a behavior which will make the browser behave as different devices and will definitely change the resolution, so the appearance will be different.
I think you just need to make media query with the commonly used resolutions. For more information, you could refer to this thread.
I recently made a logo for my website with a resolution of 400x400. It scales down to 40x40 just fine in any other browser I have tested, but it acts weirdly in Edge. Every time I refresh the page, it renders properly for a split second, before changing to an ugly, pixelated look after the page completes loading.
How it looks before the page loads fully (and how I want it to look):
How it looks when page finishes loading:
HTML:
<img src="/images/logo.png" class="logo">
CSS:
.logo {
width: 40px;
height: 40px;
}
EDIT: Here's a JSfiddle to reproduce my problem.
Poor-quality downscaling of images is a known problem in Edge, and has been for years now.
I can confirm your experience of seeing a brief flash of smoothly-rescaled image, too. And sometimes, just sometimes, an image seems to remain smoothly scaled! (It seems that one way to definitely re-create the problem is to re-size an image after the page is loaded, such as setting the size in your JSfiddle to 50x50px -- in Edge, the image resizes and looks awful, but in other browsers the result is smooth.)
The issue actually pre-dates the release of Edge. Recently MS seem to have fiddled with it, but they've certainly not fixed it. Here's a thread on an MS forum about it (note how some people are bizarrely desperate to wish the problem away, blaming it on graphics cards!): https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine
Here's another post from August 2015 about this issue, so it's definitely nothing new! https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal
Really digging into the history, here's another demo -- from 2013! https://bug486918.bmoattachments.org/attachment.cgi?id=428179
(That demo is from a comment on a MS blogpost from 2013: https://blogs.msdn.microsoft.com/ie/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer-11/ so it's been talked about for at least four years now!)
This same issue has been reported and confirmed as a bug by the Edge team twice, since at least November 2016, with no fix...
1 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/
2 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/
And there are several other posts about it here on SO.
The one possible solution seems to be rather OTT, adding the image to a canvas and rescaling that, but if you've got more than one or two images, this can cause serious lag: https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki
The only real solution seems to be to wait until MS fix this. Taking bets now on which year that will be!
I had a bit of improvement with my PNGs when I converted them to use the RGB color mode (used GIMP). It previously used 'indexed' colors.
I've found a workaround for this,
Edge down-scales the image when the size is large,
if we resize the image based on the actual size required the pixelation will be gone/reduced
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have some GIF files on my site which are all rendered extremely smooth on every browser excluding FireFox.. the following screens depict what I mean:
EXAMPLE 1
Here is rendering of a GIF on basically Safari/Opera/Chrome.. very smooth.
Here is the rendering on FF.. very choppy and semi distorted lines.
EXAMPLE 2
Rendering on Opera/Safari/Chrome, once again very smooth.
Rendering on FF, once again very choppy.
Is this a browser defect that has to be adjusted with settings or? So far I have negated this by adding some browser sniffing logic (which I don't want to do) and placing in a smaller rendition of the GIF. Any suggestions?
UPDATE
Here are the actual GIF's.. open this question in FF and please provide feed back
Be sure that your image is 100%. Sometimes the “halve pixels” can cause troubles on image rendering.
Also, some browsers and some versions tend to display the image differently. At that point, I don't think there's anyting that can be done about that.
Hope it'll help!
There's a possibility the browser is resizing your image. To avoid this, it's advisable you make the dimensions for your web browser 100% instead of setting width = 1024px. This may not fix all the issues but would at least help fit the GIFs properly into the screen.
Google Chrome Version 78.0.3904.108
Firefox Version 71.0 (64-bit)
Unable to find any difference on latest versions.
I know that this is more of a hack than a fix but you can add
in your css
.element{
filter:blur(0.33px);
}
I use this on fonts & some images to make them appear smoother, different elements need different amounts of blur but anywhere between 0.24 & 0.54px usually makes fonts and images a lot smoother & removes some level of pixelation.. But I would suggest try the other answers first.
The browser may be resizing the image. Resized images lose quality.
Look up lossy images. This may help you.
So I was using Chrome and IE together when all of a sudden Chrome decides to change its zoom level not only for the webpage, but the entire browser. I'm not sure if it happened when I restarted Chrome or if it happened when I decided to bring it to the front. So basically, all menu items, logos, icons, absolutely everything appears to have been zoomed in slightly. I have restored to original settings, disabled extensions (I don't use any extensions anyways), uninstalled and reinstalled, and nothing.
I've used the DPI settings in the properties of the Chrome application and nothing changes it. I've changed scaling in Windows and nothing helps.
Everything is larger in Chrome now and it's driving me crazy. Many menu items won't appear fully because of this. Note that this isn't just at the webpage level but at the entire browser level. I've included some images so you can compare. If you look at the youtube homepage, you'll see that everything is larger in Chrome than it is in Internet Explorer.
Scratch that apparently I need reputation in order to post pictures, ugh. If I can get 10 rep soon I'll post some pics.
I'm sorry if my description is rather vague but this isn't something I could search up. No other programs (including IE) are having this issue. THanks very much in advance if anyone can help. This is just driving me crazy.
No, Ctrl + 0 obviously does not work. This is an issue with the program as the entire program looks zoomed in. Everything, not just the webpage.
Found a "quick fix" solution from post #38 here:
Right click on the Chrome link on your desktop
Choose Properties and then add " /high-dpi-support=1 /force-device-scale-factor=1" to the existing Link to your path to chrome.exe.
Hope this works permanently. What a hassle.
If you're experiencing a "zoomed in" browser it's because you have an updated version of Chrome. Chrome and FireFox now adjusts the page zoom level according to your Windows settings to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25%. This is usually the default setting on your computer.
This means that your updated Chrome and/or FireFox browser will automatically set websites to 125%, and all other browsers remain at 100%.
What are possible solutions?
As of this writing, their isn't a known method of fixing this from a web coding standpoint, due to that it's created from the inner workings of the browser. That being said, their are still some things you can do from the "users" side to fix this:
The quickest way around this is to open up your browser and press on your keyboard "ctrl -" (control minus) twice. This will set your website content to 75%, which would be equivalent to 100% in all other browsers (but this will just fix the website content).
You can set your computers font-size settings in your control panel to "100%". This will make all of your computer fonts smaller.
I'm sure their is a better answer to this, but for now these are the 2 options that I'm seeing. In FireFox version 22 they also added this feature (as mentioned above), you can see the work around for FireFox here: https://support.mozilla.org/en-US/questions/962979
I'm sure a similar solution also exist with Chrome.
You can change your windows default zoom to 100% in display settings and make everything almost unreadable, or (a better way)
You can add a start parameter to your chrome shortcut:
"your-chrome-dir\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1
I know, it's too late, but just in case someone else has this problem...