When opening this website https://www.sitepor500...com.br (please replace the 3 dots with just one so this link does not get any SEO juice as many of you may complain) you can see there is an image as background and an overlay of a specific pattern on top of the images at the background.
On Chrome everything works fine, however on FF I see strange patterns on the screen, like the image attached. I have my zoom set to 100% (I know using zoom different than 100% may cause this problem in any other browser because of moirè effect) and everything else on the FF is in the defaults.
So I ask you, is there any CSS property that I can set to the overlay so Firefox renders it right?
I realized this bug only happens when my WINDOWS is at 125% scale (which is the only recommended option). See the image:
I couldn't repeat your issue on the 100% scaled screen. But maybe you should add background-size: 1px 2px; to those background image in #slideshow_fundo1
<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(imagens/vegas-04.png) top left repeat; background-attachment:fixed; background-size: 1px 2px;"></div>
This will fix the size of background-image to it's native size and prevent those scale issues.
UPDATED
In your Windows Display settings, set your Scale and layout to 100%. Worked for me. Tested your issue on FF with 125% - recreated your screenshot.
this happens in firefox on windows machines when scale and layout are set to 125%. If you press ctrl shift - twice and go back to 80% in firefox it is ok. But that is rediculous.
This is not related to notebooks (in brasil) only. This happens in any windows machine using scale layout 125% on any screen size. I believe FF should fix this problem. You can use any other browser and it does not happen.
Did you report this to firefox?
Related
I want to apply a zoom factor to the entire body of a webpage via CSS (or JS if CSS-only is not possible). This would be easy in any modern browser, I can just use a CSS rule like:
body {zoom: 75%;}
This works correctly in Chrome, as you can see in these screenshots: the original page:
scales correctly in Chrome:
However, unfortunately I have to support IE 11 :/
And the same solution doesn't seem to work in IE 11: as you can see, applying a zoom factor to the page body doesn't scale the contents, it resizes the body element itself, making it smaller:
I tried compensating by changing the size of the body to something higher than 100%, but while this brings the body back to full size, it also disrupts the page layout (elements start overlapping/separating in weird ways)
EDIT: various comments suggest using scaling, but I already tried using
transform: scale(0.75);
but this doesn't give the result I want in either Chrome or IE. With scale I obtain a result similar to screenshot 3 in both browsers, the only difference being that in this case the body is centered with a white rectangle around it, instead of anchored to the top-left corner (which I assume is because I'm not using transform-origin: top left, if I also add that I obtain exactly the same result as in screenshot 3).
Is there any way to do this in IE? Ideally I would like to have the same behavior as if the user actually zoomed the browser window using CTRL+ or CTRL- (which does work correctly in IE, and gives me the same result as in the 2nd screenshot)
EDIT 2: sample page where you can test this, just press F12 and try to apply a zoom < 100% to the body element. In chrome the entire page will scale, in IE the body will shrink instead (ps: on my PC this page makes the IE dev tools hang for a few seconds when you open them, but just wait a bit and they will start responding again)
This is the weirdest thing I've ever seen.
I have a class of div that has a background-image, defined as such:
background-image: url("circle.png")
background-size: contain
You can see the divs here: Rouvou.com/fiction. They're called .circle-blue or .circle-red and both classes behave identically.
So here's where it gets weird: on a Lenovo ThinkCentre machine with a ThinkVision monitor, using Firefox, they "pulsate" rapidly, or grow by a pixel in width and height rightwards and downwards, and then shrink again, very rapidly, like a flicker.
Since the Lenovo is a school computer with only two browsers installed, the only other browser I could test it on was IE, in which this behavior was not found. I wish I could post video here to show it, but here's a screenshot of one of the divs:
I've tested it on almost every browser on many other types of machines, and the only place I've ever found this behavior was Firefox on a Lenovo ThinkCentre, with a ThinkVision monitor. I also tested like 20 different ThinkCentres, and this error displayed on every single one.
Has anyone run into anything like this before? What could possibly be causing it? Can anyone at least reproduce the problem on their machine/browser?
I'm using Firefox 31.0, if that matters.
I cannot test it without access to one of these machines, but after looking at your page, I can say with 99% certainty that the issue is actually the background-size: contain part of the rule below. Firefox was only beginning to support that with that browser version, and it may have still been a bit buggy.
(http://caniuse.com/#feat=background-img-opts)
The other thing that leads me to believe this is the case is when that rule is not applied, the background image expands to the right and down as you described.
The fix, since the size of these dots do not change when re-sizing the page, would be to re-size the image manually in Gimp or Photoshop to the correct size, and not try to do it on the fly. This little cleanup will make a minor improvement overall loading/rendering of the page as well.
If you do need the image to resize, your options are using an img tag with a width: 100%; height: auto and overlaying the text over the top, or making a larger image that just has the two-tone colors and the horizontal slash. I would probably just make this all a square image, then add that as the background-image with the position set at center/center (to keep the slash in the correct spot if you need to resize) and set a border-radius on the div to 50% of the div size, making it once again, a circle.
#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
display: inline-block;
position: absolute;
width: 57px;
height: 57px;
background-size: contain;
}
I believe it's just the version of Firefox you are running. For example I had trouble with HTML 5 validation with Firefox. The version of Firefox with the graphical error was 22.0, when I viewed the same thing on my laptop, using version 38.0.1, it was in the correct place. I think Firefox was just slower to implement certain things and had no way of accomplishing certain aspects without updating the browser.
I think that the same thing is happening in your scenario. Whereby those images are stylised in such a way that your version of Firefox does not fully support; it tries it's best to show them to you but just can't do it properly.
I tested several of the css properties by going on respective w3schools pages and the only style that seemed to have any sort of graphical error was background-size:contain. However, this only happens on an even earlier version of Firefox, which may not be the same as the one you are running.
I went on this Firefox website and it says that you need:
a browser that supports scaling background images (such as Firefox 3.6 or later)
to use background-size:contain;.
Final answer: your version of Firefox does not fully support background-size:contain; so there are some visual errors.
Just a thought, don't know if it'll help since I can't test it on my machine but have you tried setting max-width and max-height on your divs? On inspecting them they only have width and height set.
Try setting them to the same width and height:
max-width: 57px;
max-height: 57px;
You could also try setting the min-height and min-width:
min-width: 57px;
min-height: 57px;
The images are originally 72x72, and you make the browser downscale them to 57x57, yet the GPU might correct the scaling to fit even boundaries (depending on the graphic card your machines have). If so, the rescaling might cause the parent element to resize in order to fit its contents (as you haven't specified the overflow behavior), which will in turn cause a recalculation of the contained element.
Solution: Render the background image as 57x57 taking into account that it will be even rounded, or - preferable if you can - render it as 56x56. You will also make the CSS a bit lighter :)
Can you just clear all the CSS loaded in your browser
CTRL+SHIFT+DELETE
I have a feeling too that there's more than one CSS files pointing to id of the div. You may also update your browser.
I'm having an extremely weird resolution problem and am hoping the tags are at least partially appropriate.
Here's what happens:
I have an image with size 1920x1080, my screen resolution is also 1920x1080 as indicated by the OS (Windows 8.1). Viewing the image in Windows Photo Viewer and clicking the button to make it "Actual size" makes it fill the entire screen from left to right, while being scrollable vertically, as expected.
I now use this image in a website/html file. I've tried both <img> and CSS background-image, resizing the element or the containing box to 1920x1080, no matter what I try, the image is too large and I see only about 2/3 of it horizontally. What's more, I've added a border to an absolutely positioned empty div and given that div width: 1247px; via CSS. The border goes nearly across the entire screen, leaving about 30 pixels on both sides combined, which leads me to the conclusion that for whatever reason, my browsers (tested in most recent versions of Firefox and Chrome) change their contents' resolution to 1280xsomething. Which I find very strange, especially since I'm using both of them in classical desktop mode and can freely display other windows on top of them without any graphical effects that usually happen when an application display its contents in a different resolution.
So, my questions are:
Is this a known issue or am I doing something wrong?
How can I fix this and make my browsers use my screen's resolution?
Here's a simple setup that reproduces the issue in question. Save as anyfilename.html, set screen resolution to 1920x1080 in system settings, open the file in a browser:
<html>
<head>
<style type="text/css">
body {
background-image: url(http://www.hd-wallpapers.com/download/black-glass_1920x1080_225-hd.jpg);
}
div {
border: 2px solid red;
width: 1247px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
I'm using 3 background images to display as icon for a mobile site which appear perfectly fine on my computer (using window sizes and user agents), however, on my iphone the icon is cut off as if the padding isn't high enough.
This is how it appears on desktop ^
However, on mobile it has this effect v
Any ideas what's causing this? the padding, when set to 20%, is enough to display the icon with a few pixels left over in all screen sizes, but even when set to 22% it doesn't display correctly so I'm assuming it's an iOS bug.
I'm using ios7 and safari if that helps!
.icon-ticket
{
background: url("#{path-img}icons/icon-ticket-2x.png") no-repeat;
}
.icon-players,
.icon-prize,
.icon-ticket
{
background-size: 40%;
padding: 22% 0;
}
I think this is related to an issue I'm seeing:
What's happening as far as I can tell is that iOS Safari is obscuring the background of the box model with the padding. Same thing happens with the background-color property (see my post linked above).
Seems like a bug. Only workaround at this point is to remove padding for elements with backgrounds.
I trying to set background image (pattern) to div and I have a deformation of pattern, that changes while I resize the browser.
HTML & CSS: http://vulntest.16mb.com/
Screenshot: https://img.skitch.com/20120830-me47twteijh35i3k2nbkbbadnc.jpg
When I remove repeat-x and set width of the div to pattern width (8px) the image looks ok - img.skitch.com/20120830-m69s2a7x4d3fdxjmsjjs8f58f6.jpg (sorry, can't post more than 2 hyperlinks).
I also tested this code on Windows 7 in IE9, Chrome 21, Firefox 13 and Opera 12.01 and div with repeat-x looks ok.
So my questions are:
is that a bug of the browser ?
how I can workaround this issue ?
Thanks a lot. Regards.
It's totally OK. If you remove the background-repeat: repeat-x; then it repeat on both the X and Y axes. Because you gave it a height it can't show you repeat Y. Just remove the repeat-x; and give it a larger width. It will repeat on both axes.