So my problem is fairly simple.
When I started to develop my website my default zoom level on my Firefox browser turned out to be, well, less than 100%. (Maybe 70%)
Which means that what I have designed so far is actually in zoomed out mode, which in turn means that my users or web visitors will see something that looks very zoomed in when they look at it with 100% mode.
This can easily be solved by holding Ctrl and scrolling you mouse wheel twice. Obviously though I can't encourage people to do that.
So,
Is there some function or property in either HTML, CSS or Javascript than can set the default zoom level to zoomed out?
I would highly recommend to create your website again !!!
Does it help ?
body { zoom: 3; -moz-transform: scale(3); -moz-transform-origin: 0 0}
Reference
Chrome can display initial zoom levels such as
HTML {
zoom:90%;
}
which would by itself zoom the entire page not the initial browser zoom level, this works like scaling, but it's not compatible with either firefox or safari or my guess. The rest of explorers.
GL
Nop, you can't. That's a browser feature.
Related
I am working on a website which is working normally on 100% zoom level.
but in some windows laptops the recomended zoom level 150%, so website is zoomed and some sections overlapping in 150%.
however when we change the zoom level to 100% in windows settings website looks normal.
could anyone tell the right approach to handle this issue ?
Is there any way yto target and change windows zoom level to 100% ?
You can use
window.devicePixelRatio
to detect odd zoom percentages. Here's a link to where someone asked a similar question. I'm not sure where you would go next. Maybe you'd increase the padding by that percentage or something
EDIT: Person in the link said this worked:
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0')
I'm trying to set scrollTop property of some DOM element programmatically and I have weird behaviour that breaks my tests in some specific environment. I created minimal repro (the link)
HTML
<div id=viewport><div id=content></div></div>
CSS
#viewport {
overflow-y: auto;
height: 20px;
}
#content {
height: 150px;
}
JS
const viewport = document.getElementById("viewport");
viewport.scrollTop = 75;
console.log(viewport.scrollTop);
The result of the script is broken on Chrome 69.0.3497.100 running on Win 10 Pro. It is 74.4000015258789 instead of 75. It works properly on the same Chrome version on Mac and even on Win 10 Home running under VirtualBox. Firefox and Edge also have no such an issue.
I know it looks very strange, but what could it be? Can anyone confirm this problem? And could it be fixed in some way to make sure that the result of the scrollTop assignment is exactly I want it to be?
Update. Thanks to #khajjit, I was able to reproduce the issue on my Mac machine and got 74.66666412353516 on 75% zoom out and 150% zoom in. 80% gives 75, 90% -- 74.44444274902344, 110% -- 74.54545593261719 etc (I updated the demo to show the results table). So the issue does not relate to OS. But it looks like the Chrome only issue. Firefox and Edge return 75 at any scale.
Update 2. Scaling the screen resolution at the OS layer also affects the situation. That was the case of Win 10 Pro described above; it had 125% OS scaling.
So the practical part of the question is how to overcome Chrome scaling rounding issues to be able to set scrollTop precisely?
Update 3. Chromium Dev confirmed that this is a bug:
This issue is because Chrome does not fully support fractional scroll
offset.
So if someone is interested in this problem resolving, please follow the link and star the issue on the Chromium end.
I think it might be related to the resolution of the monitor.
I have a resolution of 1920x1080 and with a scale of 100% the result is 75.
But if you set 75% or 150%, the result will be 74.66666412353516.
Or say 25%, the result will be exactly 74.
I don't have any exact answer as to what it might be related to, but I think this little research might lead to the right path.
I'm currently pulling my hair out with this one. Im a new web developer using bootstrap themes and templates just to get a feel for the industry, and have hit a bump in the road that needs an experienced input
Ive got a website that Ive created at the minute, where certain parts of the screens don't resize properly when the aspect ratio is lower than mine (1920px). However zooming out on the browser corrects this issue. For instance 1440px needs to be zoomed out to 75% in order for everything to be correct. A number of images have fallen out of the bootstrap framework due to a positioning request from my friend, although ive used #media queries to correct a number of these issues but thats clearly where the problems have arisen.
I'm aware that I should go back and fix this bugs from scratch but I seriously will go crazy if I have to do that. I do know that it is possible to resize the browser zoom being used if the aspect ratio is below a certain level however Ive heard thats not the way to go.
Does anyone have any advice on how to proceed with this one? Is there an "entire page/html" zoom query that can be put in place rather than a browser zoom?
Use CSS zoom:
body {
zoom: 0.75;
}
If you're just starting out, I would recommend you right click on elements that are not appearing as expected, and inspect them in your Chrome console (or whatever browser you're on). You can then first adjust styling properties and transfer over the appropriate changes to your actual code once you confirm that the adjustments you make do what you want.
In Chrome DevTools, under Rendering, there's an option to "Show potential scroll bottlenecks".
When I enabled this, some div elements I have on the screen with overflow:scroll show a flag at the top saying "repaints on scroll."
I can't find a lot of documentation on this feature, and I don't know whether it's something I can actually fix or improve upon, or just a statement of fact - the divs have content, and they do indeed scroll.
You can apply this CSS on the div with overflow: scroll or overflow: auto that create scroll bottlenecks.
transform: translateZ(0);
-webkit-transform: translateZ(0);
That will force the browser to create a new layer to paint this element, and sometimes fix scroll bottlenecks (especially with Webkit).
Although the accepted answer solves the problem, it is worth looking at the CSS will-change property. This is preferred over transform: translateZ(0); in recent times. Here is an that article explains the difference in detail - https://dev.opera.com/articles/css-will-change-property/
.scroll-container {
will-change: transform;
}
This amazingly took me multiple days to track down what was going on, and only because I saw the one side-comment at the end of a bug report at
Chromium bugtracker Issue 514303. Here's what's going on and how to fix it:
There exists a concept called "LCD text", which I believe means subpixel antialiasing, i.e. "crisper sharper text". Unfortunately, this feature is mutually incompatible with compositor-accelerated scrolling.
LCD text is enabled by default (at least on Blink/Webkit?) on all platforms which are not high-DPI (most normal monitors; i.e. you can check console.log(devicePixelRatio)). On the other hand, LCD text is DISABLED by default on high-DPI devices (think Retina display, or most mobile devices and tablets) since you don't really need a "crisper sharper text" feature on high-DPI platforms.
Therefore the opposite is true for compositor-accelerated scrolling: it is only possible on high-DPI platform where LCD text is disabled.
However, you can force compositor-accelerated scrolling on most monitors by promoting the overflow:scroll element to its own layer, by either adding will-change:transform to that element, or any hackish equivalent which will force the overflow element to be the parent of its own layer (such as transform:translateZ(0)). (Do note that vendor prefixes are being removed.)
tl;dr: Chrome doesn't suppose both subpixel antialiasing AND gpu-assisted scrolling; pick one or the other. Subpixel antialiasing is the default pick on Chrome (except on cellphones and retina displays, because their text is so small you don't need the feature, so you won't notice this issue on those platforms). Override this by forcing the element into its own compositor Layer with will-change:transform (but note that maybe your text won't look crystal perfect).
Nope, you cant modify that, it is a Chrome function to allow you to know, what's painted each update in the window.
Updates can be a lot of different things (scroll, mousemove, interval, requestanimationframe,...).
But, now you know that, you can enhance your code.
If (I dont know), the browser alway re-paint a div if it is set to overflow scroll you maybe can do some JS to set to overflow hidden when out of screen...
This post talk about different Browser layout
My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.
JQuery can be used if this cannot be done in pure CSS.
The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.
The ration between the top half and bottom half is always 50% 50% independent of browser resolution.
I would also like if both the top and bottom parts are fixed.
In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.
It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)
Is this possible with just CSS? How would you do it?
If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid?
I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.
Edit 1
Oh yeah, I have a WIP too:
http://meyers.ipalaces.org/extra/
It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.
I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.
Edit 2
How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart
Edit 3
I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.
I have successfully came up with 2 ways to do this:
Method 1
Click here to view demo
Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.
This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...
Method 2
Click here to view demo
Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)
Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.
Problems
CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
Creates excessive lag in all current Internet Explorers
It can be done with CSS only. No PIEs necessary. Just an IE6 bug and some filter magic.
Demo:
http://www.bundyo.org/test/FPB.html
Do this using raphaeljs. Create a background DIV that becomes a canvas, draw a rect to 50% of the page height (if using jquery then use $(window).resize() to monitor for a window resize and $(window).height() to get the 50% into pixels).
You can fill in the raphealjs rect with specifing it's fill value to something like fill: "90-#000000-#ffffff"
As for the image:
Place the image using raphealjs' image OR just embed it using HTML and update it's height-scale using jquery as mentioned above.
I've done something like this just recently using about 10 lines of code.
Also: Change your water.png, it's about 275kb, where as the next largest file on your page (the css) is like 1.5kb.
If you want to keep the horizon of the water at 50% on your screen, I would suggest a simpler method;
Create an image (probably about 1280 wide) in Photoshop of water on bottom and gradient on top. Fade the top gradient into a solid light blue(#68b for example). Fade the left, right and bottom of the image into the same solid color(#68b).
Set the background of your page as follows;
html {
background: #68b url(waterimage.png) center center no-repeat;
}
In your case, you'll probably want to apply the background to #wdth-100 instead of html, but it all depends on which element you want to put your background on.
All done. Let me know if that works for you.
I don't have a link to your top image, so i used the same image for top and bottom.
You should probably use a CSS solution for normal browsers and the JS for IE.
<script type='text/javascript'>
$(document).ready(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
.css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
.css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});
$(document.body).append(img1);
$(document.body).append(img2);
});
$(window).resize(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
$('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
$('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>
The pragmatic answer would seem to be to do it using multiple divs with their own background, all of which would be positioned absolutely and behind everything else using z-index.
I know that's not the clean markup solution with a single div with some magic CSS, but this is a tricky problem in pure CSS in any browser, and almost certainly impossible if you need to support IE6.
An even more pragmatic answer would be to say "I'll support IE6 as far as I can, but if it can't support my lovely background effect then that's just tough luck for anyone still using it".