Prevent Chrome from moving DOM element when showing text search result

Question

If an element is overflow:hidden and we use the browser's text search functionality to find text that is within that element, but it's not visible, Chrome will move that element so that the search result will be visible to the user.

You can see this happening here: http://codepen.io/anon/pen/qdayVz Open the link in Chrome and search for text that is not in the visible, "CCC" for example, and you will see that Chrome will move the element to show the found text.

Here is a real world example: http://www.jssor.com/demos/full-width-slider.html -- Search for text that is not in the visible slide.

This does not happen in Firefox.

Frankly, it sounds to me as if Chrome is doing it right. It's showing you exactly what you asked for in the search. Changing this behaviour is unlikely be "fixable" with CSS. — Paulie_D, May 22 '15 at 14:49
Related: http://stackoverflow.com/questions/21093148/chrome-search-feature-ctrlf-finds-hidden-text-but-its-invisible — joshhunt, Jun 15 '15 at 01:19
I agree - this sounds like Chrome got it on the dot. I'm assuming the issue is that you don't want the Chrome to hide the other content with giving the user a way to view it. Why not just make sure everything fits into your boxes? — msponagle, Jun 15 '15 at 12:30
What's the use of browser telling you it found a match if you can't see where it is? Chrome got it right. Are you asking for a script to fix this in Firefox and get it right there too? :) — tao, Jun 19 '15 at 08:03

score 1 · Accepted Answer · answered Jul 03 '15 at 22:34

I was able to prevent this behavior using JavaScript.

When Chrome moves the #wide-child div to show the search text, what it is actually doing is scrolling the contents of #parent to scroll the search text into view. This triggers a scroll event as would be expected, which can be listened for. When the scroll event fires, it is then possible to reset the element's scroll value to whatever it should be (probably 0).

Example:

document.getElementById('parent').addEventListener('scroll', function(e){
  document.getElementById('parent').scrollLeft=0;
  console.log('Prevented scrolling');
});

#parent {
  width: 30px;
  overflow: hidden;
}

#wide-child {
  width: 500px;
}

<div id="parent">
  <div id="wide-child">
    AAAAAAA
    BBBBBBB
    CCCCCCC
    DDDDDDD
    EEEEEEE
  </div>
</div>

Prevent Chrome from moving DOM element when showing text search result

1 Answers1