`transform: scale()` / `zoom` can glitch element picker position and size

krystian3w commented 5 years ago

Prerequisites

[ ] I verified that this is not a filter issue
- Filter issues MUST be reported at filter issue tracker
[ ] This is not a support issue or a question
- Support issues and questions are handled at /r/uBlockOrigin
[ ] I performed a cursory search of the issue tracker to avoid opening a duplicate issue
- Your issue may already be reported.
I tried to reproduce the issue when...
- [x] uBlock Origin is the only extension
- [x] uBlock Origin with default lists/settings
- [x] using a new, unmodified browser profile
[x] I am running the latest version of uBlock Origin
[ ] I checked the documentation to understand that the issue I report is not a normal behavior

Description

broken size and fixed position for element picker.

A specific URL where the issue occurs

http://muzykabezkabli.pl/

Steps to Reproduce

Open website
Try block something by element picker
elelement picker now is glitched

Expected behavior:

Possible fix?

or no possible without:

||muzykabezkabli.pl/css/zoom.css$stylesheet,domain=www.muzykabezkabli.pl
www.muzykabezkabli.pl##html[style]:style(transform: none !important;)

:question:

Actual behavior:

glitched by CSS3 tranformations?

<html style="transform: scale(0.895333, 0.895333);" >

Your environment

uBlock Origin version: uBO 1.18.4
Browser Name and version: Firefox 56
Operating System and version: Windows 7

krystian3w commented 5 years ago

https://web.archive.org/web/20190212164309/http://muzykabezkabli.pl/

uBlock-user commented 5 years ago

The only glitch I see is the position of the red target selector, other than that everything else is fine.

uBlock-user commented 5 years ago

The glitch in the screenshot is specific to Firefox.

krystian3w commented 5 years ago

So no reproduced on Chromium?

uBlock-user commented 5 years ago

So no reproduced on Chromium?

Yes, I cannot reproduce the glitch in the picture on Chromium.

krystian3w commented 5 years ago

<html style="transform: scale(0.895333, 0.895333);" > on mother website I found.

krystian3w commented 5 years ago

On chromium website use:

<html style="zoom: 0.895333;" >, so possible reproduce in Chromium with better demo.

krystian3w commented 5 years ago

For me this is very bad CSS Media Query use method:

http://www.muzykabezkabli.pl/css/zoom.css

@media screen and (min-width: 1516px) {

    html {
        zoom: 1;
        -ms-zoom: 1;
        -webkit-zoom: 1;

    }

}

@media screen and (max-width: 1515px) {

    html {
        /* zoom: 0.95; */
        -ms-zoom: 0.95;
        -webkit-zoom: 0.95;
        -moz-transform: scale(0.95,0.95);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1440px) {

    html {
        /* zoom: 0.90; */
        -ms-zoom: 0.90;
        -webkit-zoom: 0.90;
        -moz-transform: scale(0.90,0.90);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1365px) {

    html {
        /* zoom: 0.85; */
        -ms-zoom: 0.85;
        -webkit-zoom: 0.85;
        -moz-transform: scale(0.85,0.85);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1284px) {

    html {
        zoom: 0.80;
        -ms-zoom: 0.80;
        -webkit-zoom: 0.80;
        -moz-transform: scale(0.80,0.80);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1224px) {

    html {
        zoom: 0.75;
        -ms-zoom: 0.75;
        -webkit-zoom: 0.75;
        -moz-transform: scale(0.75,0.75);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1138px) {

    html {
        zoom: 0.70;
        -ms-zoom: 0.70;
        -webkit-zoom: 0.70;
        -moz-transform: scale(0.70,0.70);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1067px) {

    html {
        zoom: 0.65;
        -ms-zoom: 0.65;
        -webkit-zoom: 0.65;
        -moz-transform: scale(0.65,0.65);
        -moz-transform-origin: left top;
    }

}

@media screen and (max-width: 1007px) {

    html {
        zoom: 0.60;
        -ms-zoom: 0.60;
        -webkit-zoom: 0.60;
        -moz-transform: scale(0.60,0.60);
        -moz-transform-origin: left top;
    }

}

No possible better build responsive website...

kulfoon commented 5 years ago

I confirm the glitch (Firefox 65.0.1 64bit & uBO 1.18.4 & Win 7 SP1 64bit).

gorhill commented 5 years ago

I can reproduce, the site uses a transform CSS style. No clue which browser gets it right. Chromium renders fine but the mouse clicks in the picker are offset.

krystian3w commented 4 years ago

IMO no longer glitched - @gwarser?