I'm working on a page that has the following markup:
<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
/banner_home.600x400.jpg 480w,
/banner_home.728x242.jpg 768w,
/banner_home.920x306.jpg 960w,
/banner_home.1234x400.jpg 1280w">
and it seems that in the latest Chrome & Opera, they ignore whatever the screen size is and just output whichever file is listed last (so the 1234x400.jpg in my case).
Using Picturefill, Firefox and Safari both show the correct image on smaller screens.
During my testing today I launched Opera which I hadn't opened in a while. When it first launched it was at v25 and it would show the correct image at smaller screen sizes.
Then I noticed that an update had been downloaded, so I ran it, got updated to v27, and then Opera was displaying the same problem as latest Chrome.
So it seems that something has changed in Blink recently.
Can anyone else confirm this or am I just doing it wrong?
Codepen to illustrate what I mean.
You're holding testing it wrong :D
A change that went into Chrome 40 means that when a high density resource is available in the cache (e.g. the largest possible image in your example), this is the resource that would get picked, since there's no point in re-downloading a different, lower-resolution one.
If you really want to test which resource gets download in smaller devices (not that you should rely on which resource gets picked, because srcset is not about that), you can either test on an actual device, or alternatively, open an incognito session, resize the browser (or emulate a device) and only then load the test page.
I've also created a slightly clearer test case out of yours, when you can see which image was loaded.
Also: from your example it looks like you are using images with different proportions inside srcset. That's not something you should use srcset for, but rather use <picture>, that provides guaranties regarding which resource is loaded, so your layout won't break because the wrong image loaded.
When you're using srcset there is no "wrong" image. The browser is free to pick whichever one it sees fit (because its in the cache, connectivity is low, user preferences say so, etc).
If you paste this into your console, you'll see the image source that is being rendered in your browser.
console.log(jQuery('.your-image-class img').prop('currentSrc'));
Related
I made a website using webflow, in this website I have one icon that is load using :
<img src="yoursuper.svg" loading="lazy">
Nothing too crazy and it works as expected on the browser, but on iPhone (I never tried on Android) the website goes crazy and reload an infinite number of time or just crash instantly showing 'a problem repeaditly occured' on the screen. If I disable javascript the website is working fine. If I put loading="eager" everything works as expected. Nothing shows up inside the console and redirectdetective.com report was totally normal.
2 weeks before the website was working as expected on phone and the code did not change since this two weeks.
Did someone have any idea of why loading="lazy" can break a website on phone ?
It says right here on the CanIUse that the loading="lazy" attribute is not yet supported on any version of Safari unless the browser is manually put in Experimental Mode. For browser specific issues it is always good to check caniuse for compatibility. If you want Safari support you will need to choose a different method or use a polyfill like this one.
I'm normally develop on hi-dpi machines (a Macbook Pro, 2018 MBA, iPhone, Pixel 2 XL). Often I'm styling something or drawing a diagram and I need to know how it's going to look when displayed on a low-dpi machine (pre 2018 Macbook Air, majority of PCs, etc...)
I tried using Chrome's devtools device emulation and it let's you set a devicePixelRatio but it's still actually rendering text and SVGs and styles in hd-dpi. (Not really sure what that setting is doing. I made to custom settings, one 1280x780 dpi = 2, and another 1280x780 dpi = 1 and switching between them changes nothing. My guess is it only changes what "windows.devicePixelRatio" and maybe what images load if using srcset and css media queries.
Is there a way to simulate low-dpi in Firefox or Chrome? Basically to get the browser to render at 1/2 the resolution and then expand with nearest neighbor filtering. I realize it will not be a perfect representation but my hope is it's good enough to check that thin lines in a diagram for example are still readable.
Well I figured out one way, at least on Mac.
Turn on OS Zoom in Settings under Accessibility
Be sure to uncheck "Smooth images". Then in Chrome or Firefox set the zoom level to 50% and turn on the OS level zoom Option+⌘+8
This does a pretty good job of looking like a low-dpi display.
When displaying a PDF with standard (US letter) size pages, the PDF appears to be 'zoomed out' in Chrome. In Firefox, the PDF shows at a better zoom level.
Here is an example:
http://www.pdf995.com/samples/pdf.pdf
When viewed in Chrome on a 4k monitor, it is zoomed out so far that you can see 1.5 pages. While in Firefox you can see roughly half of the first page which in our case is much more desirable.
Is there any way that we can display this PDF at a standard zoom. For example, setting some headers, etc.
I'm currently using PHP to display the PDF, by setting the following headers and then echoing out the file.
Content-type: application/pdf
Content-Disposition: inline; filename=filename.pdf
Any ideas or suggestions would be great!!
From the description above
Chrome was and still does generally use "standard" 100% zoom.
Whilst FireFox was using Fit Width ("roughly half of the first page").
Many pdf extenders but not all will use the Adobe Acrobat URL trailing fragment so for the example in question try
http://www.pdf995.com/samples/pdf.pdf#zoom=200
however that can be fickle and require a second refresh of same URL.
Better (for more consistency) with the questions description of Firefox at the time use.
http://www.pdf995.com/samples/pdf.pdf#view=FitH
Which for me, with my current window in Chromium Brave / Edge will be 136% on this occasion, but some other 100%hv on a different window setting or screen.
Note the above can be over-ridden as much HTML can by the clients setting so assuming they allow a PDF to run with its own control, it works but if they pre-set remember last PDF view setting it may not.
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
I am building a new site, and I have a folder on desktop with everything in it. For testing basically I open the index page in a browser and preview that way while building it. It looked correct in firefox, safari, chrome and opera on my mac. I uploaded that file to the server, and now firefox on mac displays everything much smaller. Like all size decreased by 200px in width and fonts got small too. The other mac browser show it fine.
I had 4 style sheets at first, a main one then separate ones for other pieces, I combined all into one still no change. Initially I reset font to 100% and then set a base font of 62.5% and adjusted sizes with em's. Someone said that could be culprit so I tried changing to pixel values. No change.
Any idea what I can check why it only changes in one?
Thank you.
Is it possible that you just changed the zoom on the browser?
Reset it in view->zoom->reset
The web version could be cached. Try deleting it!
Make sure that the off-line local copy is still in the same condition as you left it. Then delete all the uploaded files from your webserver, and replace them with the desktop files.
There's a chance that, as Fiarr suggested, your browser is doing something weird with the cache, so ctrl+F5 to deal with that. Goog's suggestion of the zoom being different for your online site is probably the best, but, just to be sure, use Firebug to see what's happening and where the crazy-styling is coming from.
Failing that, you might consider posting a link to your site so that we can see what's actually happening, rather than guessing.