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.
This commit is contained in:
parent
539e774d31
commit
a0e6da6a9c
1 changed files with 11 additions and 1 deletions
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue