But when the page loads you can see the full size of the image for just a milisecond before it’s correctly sized. Can someone help me know why? See here how the image shows full when the page is loaded and resizes almost right after: https://www.useloom.com/share/bc5ebe1f3a5c47418bb92363b66a014a
Well, the image was originally set to cover, so I created the @media query to change the styling for mobile. I just copied all the code that is relevant to the slideshow image and changed the object-fit from cover to contain, which seemed like the obvious change.
Most of the rest of the code was already part of the original code. I already tried removing the font-family: "object-fit: cover"; or changing it to contain but this does not fix the issue. So I assume that is not what’s causing the problem.
It’s just not obvious to me what part of CSS could be causing the image to load as cover, and after the page is fully loaded, change to contain.
Yes, and I have seen where broken CSS resulted in all of the CSS after the error being ignored. They were unpaired curly brace errors, but I don’t know if an invalid rule might also cause a similar problem.
I removed the font-family: "object-fit: cover"; and the issue is the same. The image loads in cover, and after the site loads, the image resizes to contain. This makes me assume that’s not the issue.
I’m not seeing any image resizing with iPad Safari. AFAIK (which is only a supposition) the viewport width is 768px, so the media query should be in effect. But maybe not.
Someone with a narrower viewport width will need to take a look unless anyone can see something obvious with the CSS that might be causing an image resize.
@John_Betong I checked but I don’t see anything related to the slideshow image which is the one I changed. I don’t know a lot of this, therefore I don’t know what I should be looking for in the link you shared. Is there something evident that is causing the issue that I’m missing?
All web pages follow cascading rules and any invalid markup is resolved by a browser’s best guess at what is trying to be achieved. Any incorrect solution will most likely affect all subsequent script.
Why not try to prevent browsers guessing by eliminating the errors and warnings?
Each error and warning is clearly shown, most with solutions.
If you do not understand a particular problem there are many experienced users here to offer assistance, some even supply full solutions which is not very helpful if you are trying to learn.
@John_Betong I am trying to learn, and because of that I would not be confident enough to chage or fix other errors considering that this is a Shopify store and uses liquid and I think SCSS. I don’t know if that validator link only checks for HTML or CSS errors, but again, the site is not in basic HTML and CSS so I’m not confident enough to start touching other parts of code other than the one I originally was editing. I really appreciate your input and help. I just hope someone could just point me in a more specific direction of what I could try to do to fix this considering what I said before. This site uses liquid and SCSS.
@Mittineague thanks for your reply. Actually I decided to test with the most simple change. I went back to the original code and just changed from cover to contain:
When checking on any device you can see the same issue happening. While loading the image is on cover. After loading the image changes to contain. See site: https://znrowsn1fw9uf3pe-27980032.shopifypreview.com
After this I can only conclude that the issue is not from anything I’m doing in particular, but the code is already wrong in some way. Otherwise it should not be having this behavior when changing just one line of code.
Do you think this is a behavior generated from the object-fit property? or from other code conflicting with it? And why could this be happening only while the website is loading but gets fixed after it loads?
I don’t know, but object-fit wouldn’t be my first suspect. My first guess would be the transition as the cause.
Maybe you are on slow connection? In any case some things can cause a page to “jump” or “shift” as they redraw from how they initially determine what the layout will be to what later information specifies what it should be. eg. if an image is 500x500 the browser will reserve that area in the display. If later the dimensions are specified to something different, that area will shrink / grow and the surrounding content will move to accommodate that change.
If you temporarily comment out /* transition: $transition-image-slideshow; */
and /* @include transform(translate(-50%, -50%)); */
even though that will likely break the slideshow, does it at least stop the image resize problem?
@Mittineague it does not fix it. Removing or commenting out those lines does not fix the issue. Here I loaded the site 2 times: https://www.screencast.com/t/Z3yiYk2t7 Each time you can see how the image resizes and it’s too noticeable.
Some thoughts for your consumption that may or may not be of any value…
I notice that there seems to be some duplication of rules in the code in post #17. It seems possible that you may not be commenting out all of the iterations of image max-height and max-width and other relevent rules in CSS. The duplicate IDs show up as errors in the validator: https://validator.w3.org/nu/?doc=https%3A%2F%2Fznrowsn1fw9uf3pe-27980032.shopifypreview.com%2F
Click the small button “Message Filtering” for a summary view.
Also noted that JS places the auto-resized dimensions inline which may require !important to override.
While the image resizing JavaScript is great in that it reduces the “weight” of the slide-show images for small devices, if you are testing the ability of the JS to resize the images by dragging your desktop browser narrower, you might be exceeding the computational capacity of your computer thereby causing the jerkiness when resizing the browser. Most users will not be resizing their browsers on the fly.