Skip to content
Snippets Groups Projects
Commit a0e6da6a authored by Jess Telford's avatar Jess Telford
Browse files

More natural zooming on block level elements

Switching a `display: block` element to `display: inline-block` allows calculating the bounds based on the contents of the div rather than the entire container (which is often `width: 100%`).

This provides a much more natural zoom, especially for paragraphs and code examples.
parent 539e774d
No related branches found
No related tags found
No related merge requests found
......@@ -11,7 +11,17 @@
if( event[ modifier ] && isEnabled ) {
event.preventDefault();
var bounds = event.target.getBoundingClientRect();
var bounds;
var originalDisplay = event.target.style.display;
// Get the bounding rect of the contents, not the containing box
if (window.getComputedStyle(event.target).display === 'block') {
event.target.style.display = 'inline-block';
bounds = event.target.getBoundingClientRect();
event.target.style.display = originalDisplay;
} else {
bounds = event.target.getBoundingClientRect();
}
zoom.to({
x: ( bounds.left * revealScale ) - zoomPadding,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment