Image hover quality with css transform: scale

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
lastrodamo

Image hover quality with css transform: scale

Unread post by lastrodamo » 2021-10-31, 19:59

I noticed a loss of quality when hovering over an image with the css property transform: scale(1.10) (1.10 or more)
On this site https://3dminfographie.com/en/ on the home page or book we notice that if we hover on one of the thumbnails then the image blurs.
On other "recent" browsers Firefox 82.0.2 and Ungoogled_chromium 91.0.4472.164 the display of these images on hovering have no defects.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Image hover quality with css transform: scale

Unread post by Moonchild » 2021-10-31, 20:42

The site animates the transition and scaling it up (not down). As a result you will end up with an interpolation of the smaller image which will inevitably be a little blurred.
What should be done is start with the larger thumbnails and scale -down-, that way you won't be losing any fidelity in the animation process.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked