On http://phoenixprints.org/viewpicture.php?pid=258 the main picture stretches vertically and looks bad. I don't know why its happening at all, and seems to only happen sometime. This does not happen on all pictures, and is puzzling me.
I'm running 18.0.1025.151 (Developer Build 130497 Linux) Built on Ubuntu 12.04 on chromium and it does not happen.
19.0.1084.56 m google chrome on windows xp it does?
You set the image height to 100% with this style:
.viewimg img {
width: 100%;
height: 100%;
}
None of the parent elements seemed to have an explicit height given, so WebKit (Mac/Safari in my case) probably chose the window's height as a reference for calculating percentages.
In firefox it only works because it seems to completely ignore the height: 100% part. Try it with some other values, and you will see.
My solution would be simply removing the height: 100% from the css, browsers should (in theory) resize the image by keeping its normal aspect ratio.
Related
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?
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
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.
Have a look a this url:
http://www.preen.me/product/1113142/
The product box on the left has the class product_pic, and contains an img tag with these CSS attributes:
max-width: 100%;
max-height: 100%
This is to ensure that the image fits proportionally in the box.
It works perfectly in Chrome, Firefox and all other proper modern browsers on PC:
It does not work in mobile Safari. Specifically, if you try to look at this page on an iPad in landscape mode the image simply disappears:
I think this is a rendering issue in mobile Safari but I'm at a loss as to how to solve it. Removing either one of the max-width\max-life properties brings back the image, but obviously without the required functionality. How can I go around this?
As I remember it, this is fixed by setting html/body tag to width/height 100%.
html,body{
width: 100%;
height: 100%;
}
And don't forget to set all divs up to the div where it should have effecto to width/height 100%.
Also you can try to set the html,body to position: relative. I'm no longer sure about this one.
A few suggestions. Other than playing with "overflow:hidden", you can try adding default values for width and height or simply play around by using "width:auto" or "height:auto" or both. You may also want to set "float:left".
Hope this solves your problem (at least partially).
happy coding :)
I have a 3-column table which contains images. All td's have width="33%", and the images contained have CSS width:100%. In FF and Opera, the images scale like I want them to, i.e. fill the entire width of the cell, maintaining their aspect ratio. However, in IE7, they behave quite differently: I think the pic with the largest width stretches the entire column, and the smaller ones are stretched up to the new available width.
The page in question is: http://mybgagent.com/print.php?offers_id=4515
(I know the site is a mess, I didn't code it)
Any advice on what to do? Setting css position:absolute makes images scale correctly in IE, but breaks scaling in Opera and FF, as well as positioning in all browsers.
I ran into this issue a lot with IE7 "compatibility" mode. the easy fix was to not only put
width: 100%;
in my css, but also
width: 100%;
float: left;
cleared that nasty hiccup right up.
Sounds like you have a solution for each browser but no way to target it, well here comes the CSS Browser Selector to help you with that! Just plug in this jQuery to your site (in the <head> section), then write separate rules for IE and the real browsers and append .ie before your IE selectors :)
Works great, I use it all the time!
Example:
myTd
{
background: #f00; /*whatever your rules are*/
}
.ie .myTdv
{
position: absolute;
}
And that's it!
Try setting the style of the parent cell to position:relative.