ausi/respimagelint

CSS transitions cause incorrect size detection

mrblc opened this issue · 1 comments

mrblc commented

When image resize is animated via transition, size is incorrectly detected.

Manual solution is to disable transitions in CSS. Just temporary add:

* {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

to the end of CSS.

My suggestion is to either add this to readme.md or to inject this style with javascript. In later option, to future proof it (e.g. opening report in new window), it could be modified into:

.respimagelint-no-transition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

and add class espimagelint-no-transition to body before running and remove after so it does not affect page while not running.

I just ran into this exact problem, disabling all transitions and it worked fine.
I like the idea with the injected respimagelint-no-transition modifier class when running the script.