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.
Related
On this page in Firefox and IE if u make browser window 350px the table with products is out of borders and the scroll appears. Also the "Sort by: Artist Sort direction Price " part and other elements above it are out of border too. This error does not appear in Chrome, Opera and Safari, in this browsers its adaptive for mobile screens.
image thats show error
Tell me please how can I make this page to be adaptive in FF and IE?
P.S. Please dont just minus, please explain what wrong with my question?
Responsive Tables is a big problem and a lot of people (including myself) have tried many different solutions to that.
The one size fits all solution is https://github.com/filamentgroup/tablesaw
It relies on jQuery (Javascript) and CSS to work, so it might not fit all projects, especially relying on Javascript is something I would not want to do.
Apart from that there are lots of different solutions for you to try out. Chris Coyier at CSS-Tricks wrote a great roundup some time ago: https://css-tricks.com/responsive-data-table-roundup/
Problem was with image that had 764px width.
I made it 100% and problem was fixed!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On http://quizdash.co.uk/ Internet Explorer got HUGE error: it scaling site content to all screen, but in develepment panel, it say that content not scaled and has original size.
http://storage2.static.itmages.com/i/16/0201/h_1454300006_8737908_ad9e854b85.png
Of course, scale option=100%.
Other browsers show site correctly.
Is this undocumented feature of modern IE? Can I with css/html make IE do not scale site?
It's not an error in IE or an undocumented feature.
In your vendor.css, the following CSS appears:
#-ms-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#-o-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
That's causing the page to scale with the viewport. The only browsers that support #viewport are IE and Opera Mini, so the page will only scale in those browsers. As far as the CSS is concerned, the page is displaying correctly in IE, not the other browsers, so your assertion that the other browsers are showing the site correctly is wrong. However I cannot comment on whether IE is "lying" about computed pixel sizes because I don't know how or if viewport scaling should affect computed values.
If you don't want the page to scale with the viewport, don't use #viewport.
Is there a way to make an image bigger in HTML5 without it getting blurry.
For example, this image is 24x24:
If you instead load it with a width of 150, it gets blurry. I want pixelated!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
Instead I would like to change the rendering engine to display like what you would see in photoshop. Something like this:
I only care about modern browsers.
If you just leave it to the browser, they will try to make it as smooth as possible nowadays (old IE versions didn't). So your best bet is to load it into a canvas and do the (nearest-neighbour) upscaling yourself. I'm not saying that this a sane idea, just putting it out there. :)
That, or have multiple versions of the image and switch them around somehow. There are a few technics you can try, like css sliding-doors.
After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.
Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.
Like this:
Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.