Prevent that a fixed element resizes when zooming on touchscreen

by

Demo to this answer
Dialog widget library I wrote based on this answer.
Demo for the dialog widget Try it on mobile, zoom around and tap the link.

While the gesture event seems to hold some metadata about the scale factor of something, we might be better off in control and find it manually. Since we want to keep the effect up while the user moves around live, we need to recalculate during every scroll event.

window.addEventListener('scroll', function(e){ /* coming next */ })

We calculate the zoom factor and apply it to the rescaled element as a CSS3 transform:

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

This will rescale the element back to zoom 1 ratio relative to the current viewport zoom, but it’s likely it is still incorrectly placed on the page. This means we have to get new values for it’s position. What will actually happen on screen is dependant on the element’s CSS position value, fixed will behave differently than absolute and on mobile Safari specifically, fixed position has an added smoothed out effect while the page is zoomed, which creates some inconvenient problems for this cause – I would suggest having a 100% content height element as a relative parent for your intended scaled element, then in your script, position your element absolutely inside of the parent. The following values work for this example demo:

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

You might also pay attention to using transform-origin CSS property depending on from which anchor point you want the scaling to take effect – this has a direct effect on alignment.

More Related Contents:

  1. Media query to detect if device is touchscreen
  2. How to disable margin-collapsing?
  3. Stretch and scale a CSS image in the background – with CSS only
  4. Does “display:none” prevent an image from loading?
  5. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  6. Is there a way to break a list into columns?
  7. vertical align middle in
  8. How to make 3-corner-rounded triangle in CSS
  9. How can I scale an image in a CSS sprite
  10. Gradient text color
  11. difference between css height : 100% vs height : auto
  12. Specify multiple attribute selectors in CSS
  13. Bootstrap xs columns wrap
  14. How to only show certain parts with CSS for Print?
  15. Is background-color:none valid CSS?
  16. Customize Bootstrap 4’s grid-system Breakpoints
  17. Div height 100% and expands to fit content [duplicate]
  18. Why use an attribute selector to match classes?
  19. CSS transition auto height not working [duplicate]
  20. Vertically centering content of :before/:after pseudo-elements
  21. First letter Capitalize and other letters in lower case in css?
  22. How to remove margin from every element that is the last element in a row?
  23. How to efficiently load google fonts in Nuxt
  24. Django CSS not updating
  25. Text Stroke (-webkit-text-stroke) css Problem
  26. Full background image with fade effect
  27. Do I not understand the flex-grow property?
  28. Is there a way to style HTML5’s range control?
  29. Keep background image fixed during scroll using css
  30. How to keep :active css style after clicking an element

Leave a Comment