-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Plot outputs incorrectly sized inside scaled outputs #4135
Comments
The error first appeared in shinycoreci 2024-08-29. This is most likely when GitHub rolled out the 20240825.1 MacOS image -- or generally updated their runners to use Chrome 128 (from 127). This is almost certainly because Chrome 128 changed their implementation of zoom to be in line with standards.
Thanks to this useful comment providing context: select2/select2#6338 (comment). Also, from the Chromium dev mailing list:
|
CSS zoom property affects el.getBoundingClientRect() but not el.offsetWidth/Height. When reporting sizes of outputs from client to server, we need to back out the CSS zoom because those sizes are used as CSS width/height, which will be affected by zoom. (Note that something similar happens with CSS transforms but we don't have a good way to deal with them)
CSS zoom property affects el.getBoundingClientRect() but not el.offsetWidth/Height. When reporting sizes of outputs from client to server, we need to back out the CSS zoom because those sizes are used as CSS width/height, which will be affected by zoom. (Note that something similar happens with CSS transforms but we don't have a good way to deal with them)
When plot outputs appear inside scaled regions of the DOM, Shiny reports the output area in absolute pixels (i.e. the size of the output area after the scaling is applied). The returned image, however, ends up being smaller than desired because it doesn't take into account the scaling.
You can see this happening in the superzip example.
I've applied a red outline to the plot output area and a blue outline to the actual image. Ideally these would overlap and the image would take up the full output area.
CSS
In this example, on app load, the
histCentile
output reports size 259 x 180px and receives an image with those dimensions. But the output appears in an absolute panel (#controls
) that haszoom: 0.9
applied. Those are indeed the absolute dimensions of the#histCentile
container after the browser has scaled the output container. Once placed, the image ends up with the absolute size of 233.09 x 162px. The image should instead be 287.78 x 200px (taking into account the scaling) to end up with the correct size.The text was updated successfully, but these errors were encountered: