It is possible to change the whole size of bootstrap. I mean, not only the font size.
My webpage is shown too big, and it looks better with the Firefox windows at 80%-90%. It is this possible?
I suposse if I change the font size, buttons, boxes, containers, panels still looks the same size...
Thanks a lot.
You could use css transform to do it.
body {
transform: scale(0.8);
transform-origin: 0 0;
// add prefixed versions too.
}
It might cause some weird clipping and overflow issues but short of using a CSS preprocessor for bootstrap this is likely your best option.
Related
I'm implementing a Pinch to Zoom gesture in JS/CSS. In order to do so, I'm putting a fairly large image source inside a small sized IMG tag and then apply a CSS scale transform to make it bigger.
Things are working fine however on Mobile Safari the image gets blurry once I start scaling up. It should not be the case as the src for the image is big enough to support this size, but somehow Mobile Safari is displayed it as blurry.
I have debugged the issue quite a bit and found out that the culprit is an unrelated div in my page that is setting translate3d(0,0,0). To my understanding this is a Hack to trigger GPU hardware acceleration. What I believe it is happening is that because of translate3d(0,0,0), hardware acceleration is being applied when rendering the <img/>, and since the <img> is small in size, it is drawn small and the scale is applied afterwards.
To better understand the problem, I have it this code, available in in codepen here
HTML
<div>
<div id="translate3d-div"/>
</div>
<img id="image" src="https://www.trackalytics.com/assets/thumbnails/lipsum.com.jpg"/>
CSS
#translate3d-div {
/* If I remove this, the image is not blurry */
transform: translate3d(0,0,0)
}
#image {
width: 95px;
height:76px;
transform: scale(20);
}
This displays the image blurry on Mobile Safari, but it works fine on Chrome in Android.
Is there a way to fix this other than removing the unrelated translate3d? I don't think I can do that since it might be used by some other feature in the webpage.
This is because how WebKit renders transforms when hardware acceleration is enabled (like in iPhone). It increases performance dramatically but affects antialiasing when you apply a 3DTransform when no real transformation happens.
A hackfix is to set a background for the element.
#translate3d-div {
transform: translate3d(0,0,0);
background: transparent;
}
Source: https://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit
I couldn't find a working hack for this, but the workaround I used was to simply create a bigger HTMLImageElement and scale it down initially. Then scaled up it will not look blurry. This made my code slightly more complicated but it is working fine.
I'm using the Nivo Slider and all the images are the same "height/Width" 766x400 but when viewing the slider in Firefox it up-scales everything to a masive 1,333px × 696px.
The interesting thing,when you do a split screen in the browser everything looks fine but full screen everything is blown up.
I'm wondering what CSS code I should be using to fix this issue
I would post my whole "code" but the images are related to my business and I'm not really sure.
Thanks
This may be caused by inline styles set by Nivo Slider, but it's hard to tell what the cause can be with example CSS/markup.
However the basics for responsive images is to make sure the width (or, often preferably, the max-width) is set to 100% and that the height is set to auto. If there's inline CSS that will override your own CSS so you may either need to add !important to those rules or edit the plugin files for Nivo Slider and remove the printing of inline styles.
So basically, try this (but you may want to use a more specific selector and you shouldn't use !important unless it's absolutely necessary):
img {
max-width: 100% !important;
height: auto !important;
}
When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy.
Note: This only happens on Retina-Displays — no problem at all with 'normal' ppi-displays, but fuzzy on for example a new MacBook Pro with Retina Display.
My CSS (without vendor-prefixes):
img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}
Note: to see the effect/bug, I've set the transition-duration to 2 Seconds
Check out my Demo: http://jsfiddle.net/dya2t/7/
How can I fix this?
EDIT: If I set the :hover-state to filter:none its sharp! :-) BUT of course the transition does not work anymore :-/
As soon as there is a filter on an image (even if the value is 0 or 0%), the image gets fuzzy on retina displays (with or without transitions … its just blurry, all the time). I guess this is a Filter-Bug.
This is a known Bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471
I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0);
http://jsfiddle.net/78qbn/3/
Child elements with -webkit-backface-visibility: hidden; will resolve this.
http://codepen.io/amboy00/pen/Bxbrd
Joined stackoverflow to let others know since I had to find this out myself:
this bug also manifests (but differently) when trying to print images in chrome. They turn super pixelated!
If you throw a -webkit-filter onto a PNG in chrome regardless of printer or print settings, it prints the image/s at the right size, but downsampled to under 70 dpi. It's visible in the print preview too.
-webkit-transform: translateZ(0); fixed it.
Meatspace repro: prints of same stack of PNGs with & without fix
I just built out a website for a client, based on the Photoshop files they sent me, and they came back and told me that somehow the PSDs were 125% the size they were supposed to be, and that they need be to shrink everything to 80% of what it is now.
I figure I'm going to need to re-cut all the images, but I would rather not rewrite the CSS so I'm exploring alternatives.
Currently, all values are in pixels. I'm wondering if I should try to find a script that would take all the pixel values and multiply by .8, or if I should use a px to em converter and then set the base size in the html tag to 80%, or if there is better way to fix this problem.
Ugly css hack alert! :D
html {
zoom: 0.8; /* Old IE only */
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
Update
It appears latest Chrome and IE10 supports (and applies) both zoom and transform at the same time, scaling it twice, so I recommend only using zoom when testing old IE browsers.
You can re-size the page inside of an iframe that is at 80% width. You would need to remove the borders and turn scrolling of but it should work.
Tutorial here
How can I scale the content of an iframe?
I haven't tried it but it seems like it could possibly be sketchy as far a browser compatibility and bugs if you ask me. just thought i would pass it along
I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.
Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)
.test {
-webkit-transform: translate3d(0px, 100px, 0px);
}
.testInner
{
/*-webkit-transform: scale(1.2);*/
-webkit-transform: scale3d(1.2, 1.2, 1);
text-align: center;
}
<div class="test">
<div class="testInner">
This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
</div>
</div>
Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.
Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.
See here:
http://jsfiddle.net/SfKKv/
Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.
I found that using:
-webkit-perspective: 1000;
on the container of your font or icon set kept things crisp for me after experiment with the issue on Android nexus 4.2 for sometime.
A css filter effect is a graphical operation that allows to manipulate the appearance of any HTML element. Since Chromium 19 these filters are GPU accelerates to make them super fast.
CSS3 introduces a bunch of standard filter effects, one of them is the blur fitler:
-webkit-filter: blur(radius);
The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.
Set the radius to 0 will force browser to use GPU calculation and force it to keep your html element unchanged. It's like applying an "hard edges" effects.
So the best solution for me in order to fix this blurry effect was to add this simple line of code:
-webkit-filter: blur(0);
There is also a known bug that only affects retina screens. (See here: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). So in order to make it works also for retina, I recommend to add this second line:
-webkit-transform: translateZ(0);
Try this
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Or for a more exact approach you can call a javascript function to recalculate the transformation matrix by removing the decimal values of the matrix. see: https://stackoverflow.com/a/42256897/1834212
I came across this issue when using the isotope plugin (http://isotope.metafizzy.co/index.html) in combination with the zoom plugin (http://janne.aukia.com/zoomooz/). I built a jquery plugin to handle my case. I threw it up in a github repo in case anybody could benefit from it. - https://github.com/charleshimmer/jquery-hirestext.
I used javascript to move the text 1px top and then with 100ms after, back 1px down. It's almost unperceptive and solved the problem completely cross-browser.
body {
-webkit-font-smoothing: subpixel-antialiased;
}
or I think you could put that on a specific element, but I was having problems with one element affecting the whole site.
I think it is a problem with custom font-face fonts.
Webkit treats 3d transformed elements as textures instead of vectors
in order to provide hardware 3d acceleration.
This has nothing to do with it. You'll notice that your aliasing problem can be fixed with the addition of duration and direction information (e.g. 0.3 linear). Your having a mare trying to render everything at runtime:
Same for the above ^