If any dev reading this knows the solution, please reply.
Less prominent with app.disableHardwareAcceleration();
Appears to depend on hardware capability.
Does not stutter once you have scrolled to the end. So, its related to how chromium render images?
Images are preloaded by setting src on const img = document.createElement("img"); inside useLayoutEffect(()=>{ },[])
If you have an answer then post in this Github Repository Link.
Expecting no stutter when scrolling down images.
Related
I try to get my head around the relatively new img attribute "loading".
I understand that if an img has the attribute loading="lazy" then it will tell the browsers that support the attribute, that it can be loaded when getting near the viewport.
So why not always set loading="lazy"? Those images that appear instantly on the screen would get rendered anyways, as they already are inside the viewport. So basically loading="lazy" is ignored in that case anyways.
I also see in this demo https://mathiasbynens.be/demo/img-loading-lazy that the pictures in the top of the dom are having the loading="lazy" attribute set.
I got the link above from: https://web.dev/native-lazy-loading/
Thanks in advance :)
You should avoid setting loading=lazy for any images that are in the first visible viewport.
Source: https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport
In short, if the image is not loaded lazily, the browser can start fetching the resource immediately. Lazy images need to wait until the Layout phase of the browser rendering pipeline, to determine if an image is in the viewport or not.
Adding loading=lazy unnecessarily will likely add a small amount of delay until your webpage is fully rendered.
One of the reasons I can think of to not always use lazy loading is when the network can be disrupted. In that case, you want to download as much as possible while the connection is active, so that the most of the page is usable when the connection is down.
It’s a hint to the browser that the image might not be immediately useful/visible and that it should prioritize other resources. The third image in an image carousel or images appearing far down on the page are some good examples of when this attribute is useful.
Overly lazy implementations, such as Firefox, don’t images until they’re scrolled into view. This causes the browser to display a white area while the image is being loaded. This isn’t an ideal user-experience. Chrome, on the other hand, loads images 3000–8000px before they appear on screen which is too eager again.
Chrome won’t load lazy-loaded images even when they’re within the viewport for background-opened tabs. This is caused by a limitation of Chromium’s IntersectionObserver and may be fixed in a future version.
A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.
Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/
Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?
`
I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.
I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611
I would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
I'm currently developing a responsive website and have a certain image within a set amount of 'columns' (div size) for the site. This image is bigger than the size of div itself so flows over the edges (using html and not CSS Background-Image). When I use the CSS background-image method the image gets cut off to fit the div and overflow:visible doesn't fix it (from what I've read you can't have a background-image overflow it's own div).
So I want this image to overflow it's div but also have the image be cropped to the edge of the browser window, otherwise I have a big empty white bar down the side of the website when you resize the browser window for smaller screen devices, like so:
http://i.imgur.com/74NEmDF.jpg
Are there any known methods of solving this or does Javascript need to be used to fix it (I know little JavaScript so I couldn't figure it out myself). Thanks in advance.
edit: Still no luck, been searching everywhere. Would love any help, thanks guys.
edit 2: Figured it out! Was a very simple fix of adding overflow:hidden to my hero unit (big containing div). I feel so stupid it took me so long to figure out such a simple fix.
I have an img menu with svg images that changes the svg image with a identical image with a different color when you push in menu. When I test it with Chrome it works fine until you visit one link the second time, that chrome resize it to a smaller image.
I've made a lot of tests... I've tested :visited css, user agent css, and many another properties and it seems to be all ok. When you changes some css property in developer tools it changes automagically to correct size.
My last test was to change the width from 135px to 134px (don't ask why) and it works in 1680x1050 screen but not in 1920x1200 screen (???????). Is it an aspect ratio problem?
I'm getting crazy!!
I'm using angularjs to make the black image to red image change, but I think this is not the problem (it does a src replacement)
You can see it in the webpage http://silviaperezcruz.com.
I'll apreciate any kind of help.
PD: Sorry for my bad english
I couldn't see an obvious reason why it is doing it,. But if I had to guess, I would cast a suspicious eye on respond.js first. Does it still do it if you remove that?