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.
Related
I'm working on a website that's using a lot of embedded SVGs instead of linking them through an <img> tag, since that speeds up loading times. Most of them are pretty simple, single-colored and don't shift. Since our logo was made as an SVG as well it's embedded into the page as HTML too.
One day Search Console started reporting a CLS issue on Desktop, but not on mobile. I tested it locally but I wasn't able to see any layout shift nor find a cause. I went ahead and tested the page with https://developers.google.com/speed/pagespeed/insights/ and https://layoutstability.rocks/ and both reported the same, a CLS on Desktop but not on mobile.
Screenshots of the tests can be found here:
CLS issue on Desktop
No CLS issue on Mobile
PageSpeed Insights reporting the causing element
As you can see above PageSpeed Insights marked the embedded logo SVG as the cause for the ongoing layout shifts.
Causing element identified
Above you can see how I identified the causing element.
So now I'm wondering not only about the issue with the SVG shifting around but also about the issue only happening on Desktop.
Is there an easy way to fix CLS issues with embedded SVGs? Or do I need to specify static height and width to preserve the space? I'd like to not do so since the SVG is scaling when resizing the browser width which would limit the responsiveness.
I also wasn't able to find any resources on that issue whatsoever, seems like I'm the first posting about it.
Any help appreciated! (as a reference, this is the affected page: https://hydra.bot)
I actually found the issue and it has nothing to do with the SVG but with the webfont swapping in. Removing the webfont from the font-family stack solves the issue. Not sure how to use webfonts without CLS then though.
The problem is that having images and not indicating a width and height they grow and then adjust according to your CSS, you must indicate the dimensions for the browser to reserve the space while the images are loading.
You can find more about this at: https://web.dev/optimize-cls/
On Windows, and to a certain degree also on Mac OS, with different browsers (Firefox, Chrome, Safari), our menu bar has rather pixelated/blurry font-rendering. This is on an ASP.NET Core 2.1 site that uses Bootstrap 4.1.3 but it's easy enough to reproduce with just simple HTML: https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
Interestingly, the same font renders just fine in other areas of the site. I have noticed this on a 4K monitor that has 150% scaling activated but the issue also shows up with 100%. I have also tried this with different fonts, so apparently it's not an issue with the font, either.
Originally I thought this was an issue with transparency or transformations but finally, I tried simply changing the background color - and it turns out this blurriness is very obvious with red and dark blue (and of course, combinations of those, like magenta), and pretty much invisible with most other colors. Also, by changing the main background color, I can reproduce the issue for the other areas.
You can directly have a look at the site where this occurs here: https://beat-the-rhythm-vr.com/Home/Social (the navigation with the blurry text shows up after accepting the cookies).
Here's an image that shows the effect with different backgrounds, and also rendered on Mac OS (the Mac OS screenshots appear smaller in the image):
As far as I can tell, this does not happen at all on iOS. On the Mac, I don't quite see the issue on the screen but it does become obvious when making a screenshot. This could, however, also be an artifact due to scaling on the screenshot.
This is what it looks like on iOS (I get the same blurriness on Windows when making the Window small enough to get the same layout as on mobile, so that's also not the issue causing this / fixing this):
The obvious question: Is there any way to fix this, and if so, how?
EDIT: This is in addition to the comment on Porter's answer (I can't add screenshots in comments, so I'm posting this here):
EDIT 2: While this article is about a slightly different issue, my guess is that what I'm seeing is really just a limitation of ClearType that is related to what the article outlines: Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed
ClearType apparently doesn't work when the background color isn't known, and from what I'm seeing, it seems to be designed primarily for black text on white backgrounds, also works well with light colors on dark backgrounds but not really so much for red/blue/magenta backgrounds (and any font-color).
I am unable to reproduce this on a 1080p or 4K display, with either mobile or web view on Firefox and Chrome. Fonts do tend to blend with the background color, so not every pixel of the font is going to be the same color; It'll blend on the edges. The smaller the font, the less pixels it has to work with for blending. If you use a larger font, does the same problem occur?
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
I have an odd issue. Sometimes when I load the website I've created within IE8, my main content block loads, the background color for the entire page loads, but the background image I've declared hangs for about ten seconds before suddenly appearing.
This does not happen in FF, Chrome, Safari, or IE10. Have not tested in IE9. I've read that you should try to minimize the size of the background image, so I got it down to around 100kb.
I'm just hoping that someone could give me some insight into why IE8 would hang on loading a background image. Here are links to my page, and my CSS code. Also, keep in mind that I am using GetSimple CMS, so all of the absolute paths I'm using are on purpose as this CMS requires it.
http://expirednews.net
http://expirednews.net/theme/CornerShop/css/style.css
Picture of what is happening:
http://i.imgur.com/ES3LXOf.jpg
I would guess that it's just taking a long time to load in. You've got a lot of graphics there, and the background image will load last. You might consider further delaying the slideshow, and dynamically loading the images into it after both the page has completed, and a small timeout, even 100ms should help significantly.
Another alternative, is to put the background image in an actual img tag that is hidden via css. This should cause IE to load the background image before all the slideshow images. A little bit hacky, but quick and dirty.
I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.
The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)
The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.
My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)
Comparison:
Have you tried putting this in your CSS?
img { -ms-interpolation-mode: bicubic; }
There's also this https://github.com/adamdbradley/foresight.js which looks very interesting
Make sure IE9 isn't in compatibility mode or IE7/8 mode...
The reason this happends if because the bitmapdata is actually rendered completely different in the IE browser, the thing IE does is it "cuts" away pixels over a set ratio so like every 5 pixels it yanks a pixel and therefor makes it look like it misses certain gradient properties.
not much you can do about this except for keeping the aspect ratio set but I guess you would've known that by yourself already